<!DOCTYPE html>
<html lang=zh>
<head>
    <!-- so meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="HandheldFriendly" content="True">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5" />
    <meta name="description" content="初识Vue简介Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。 创建Vue实例 想要让Vue工作，需要创建一个Vue实例，并且传入一个配置对象；  Vue实例和容器是一对一对应的；  真实开发中只有一个Vue实例，并且会配合组件一起使用  中的xxx要写成js表达式，xxx会读取data中的所有属性  data中的数据发生改变，那么使用该数">
<meta property="og:type" content="article">
<meta property="og:title" content="Vue">
<meta property="og:url" content="https://mihaoyou.gitee.io/Vue/index.html">
<meta property="og:site_name" content="Cactus">
<meta property="og:description" content="初识Vue简介Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。 创建Vue实例 想要让Vue工作，需要创建一个Vue实例，并且传入一个配置对象；  Vue实例和容器是一对一对应的；  真实开发中只有一个Vue实例，并且会配合组件一起使用  中的xxx要写成js表达式，xxx会读取data中的所有属性  data中的数据发生改变，那么使用该数">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2023-04-04T10:39:06.000Z">
<meta property="article:modified_time" content="2023-09-18T14:16:31.946Z">
<meta property="article:author" content="云雪">
<meta property="article:tag" content="vue">
<meta name="twitter:card" content="summary">
    
    
      
        
          <link rel="shortcut icon" href="/images/favicon.ico">
        
      
      
        
          <link rel="icon" type="image/png" href="/images/favicon-192x192.png" sizes="192x192">
        
      
      
        
          <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
        
      
    
    <!-- title -->
    <title>Vue</title>

    <!-- styles -->
    
<link rel="stylesheet" href="/css/style.css">


     <!-- 添加到这里！！ -->
     
<script src="/js/switch.js"></script>


    <!-- persian styles -->
    
    <!-- rss -->
    
    
	<!-- mathjax -->
	
<meta name="generator" content="Hexo 6.3.0"><link rel="alternate" href="/atom.xml" title="Cactus" type="application/atom+xml">
</head>

<body class="max-width mx-auto px3 ltr">
    
      <div id="header-post">
  <a id="menu-icon" href="#" aria-label="目录"><i class="fas fa-bars fa-lg"></i></a>
  <a id="menu-icon-tablet" href="#" aria-label="目录"><i class="fas fa-bars fa-lg"></i></a>
  <a id="top-icon-tablet" href="#" aria-label="顶部" onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');" style="display:none;"><i class="fas fa-chevron-up fa-lg"></i></a>
  <span id="menu">
    <span id="nav">
      <ul>
        <!--
       --><li><a href="/">首页</a></li><!--
     --><!--
       --><li><a href="/about/">关于</a></li><!--
     --><!--
       --><li><a href="/archives/">归档</a></li><!--
     --><!--
       --><li><a href="/categories/">分类</a></li><!--
     --><!--
       --><li><a href="/search/">搜索</a></li><!--
     -->
      </ul>
    </span>
    <br/>
    <span id="actions">
      <ul>
        
        <li><a class="icon" aria-label="上一篇" href="/Hadoop%E4%BC%AA%E5%88%86%E5%B8%83%E6%A8%A1%E5%BC%8F%E6%90%AD%E5%BB%BA/"><i class="fas fa-chevron-left" aria-hidden="true" onmouseover="$('#i-prev').toggle();" onmouseout="$('#i-prev').toggle();"></i></a></li>
        
        
        <li><a class="icon" aria-label="下一篇" href="/Spring-boot/"><i class="fas fa-chevron-right" aria-hidden="true" onmouseover="$('#i-next').toggle();" onmouseout="$('#i-next').toggle();"></i></a></li>
        
        <li><a class="icon" aria-label="返回顶部" href="#" onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');"><i class="fas fa-chevron-up" aria-hidden="true" onmouseover="$('#i-top').toggle();" onmouseout="$('#i-top').toggle();"></i></a></li>
        <li><a class="icon" aria-label="分享文章" href="#"><i class="fas fa-share-alt" aria-hidden="true" onmouseover="$('#i-share').toggle();" onmouseout="$('#i-share').toggle();" onclick="$('#share').toggle();return false;"></i></a></li>

        <li><a class="icon" aria-label="切换主题 " href="#"><i class="fas fa-lightbulb" aria-hidden="true" onmouseover="$('#i-switch').toggle();" onmouseout="$('#i-switch').toggle();" onclick="switchNightMode();return false";></i></a></li>

      </ul>
      <span id="i-prev" class="info" style="display:none;">上一篇</span>
      <span id="i-next" class="info" style="display:none;">下一篇</span>
      <span id="i-top" class="info" style="display:none;">返回顶部</span>
      <span id="i-share" class="info" style="display:none;">分享文章</span>
      <span id="i-switch" class="info" style="display:none;">切换主题</span>
    </span>
    <br/>
    <div id="share" style="display: none">
      <ul>
  <li><a class="icon" target="_blank" rel="noopener" href="http://www.facebook.com/sharer.php?u=https://mihaoyou.gitee.io/Vue/"><i class="fab fa-facebook " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="https://twitter.com/share?url=https://mihaoyou.gitee.io/Vue/&text=Vue"><i class="fab fa-twitter " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://www.linkedin.com/shareArticle?url=https://mihaoyou.gitee.io/Vue/&title=Vue"><i class="fab fa-linkedin " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="https://pinterest.com/pin/create/bookmarklet/?url=https://mihaoyou.gitee.io/Vue/&is_video=false&description=Vue"><i class="fab fa-pinterest " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="mailto:?subject=Vue&body=Check out this article: https://mihaoyou.gitee.io/Vue/"><i class="fas fa-envelope " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="https://getpocket.com/save?url=https://mihaoyou.gitee.io/Vue/&title=Vue"><i class="fab fa-get-pocket " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://reddit.com/submit?url=https://mihaoyou.gitee.io/Vue/&title=Vue"><i class="fab fa-reddit " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://www.stumbleupon.com/submit?url=https://mihaoyou.gitee.io/Vue/&title=Vue"><i class="fab fa-stumbleupon " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://digg.com/submit?url=https://mihaoyou.gitee.io/Vue/&title=Vue"><i class="fab fa-digg " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://www.tumblr.com/share/link?url=https://mihaoyou.gitee.io/Vue/&name=Vue&description="><i class="fab fa-tumblr " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="https://news.ycombinator.com/submitlink?u=https://mihaoyou.gitee.io/Vue/&t=Vue"><i class="fab fa-hacker-news " aria-hidden="true"></i></a></li>
</ul>

    </div>
    <div id="toc">
      <ol class="toc"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%88%9D%E8%AF%86Vue"><span class="toc-number">1.</span> <span class="toc-text">初识Vue</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%AE%80%E4%BB%8B"><span class="toc-number">2.</span> <span class="toc-text">简介</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%88%9B%E5%BB%BAVue%E5%AE%9E%E4%BE%8B"><span class="toc-number">3.</span> <span class="toc-text">创建Vue实例</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%A8%A1%E6%9D%BF%E8%AF%AD%E6%B3%95"><span class="toc-number">4.</span> <span class="toc-text">模板语法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#el%E5%92%8Cdata%E7%9A%84%E4%B8%A4%E7%A7%8D%E5%86%99%E6%B3%95"><span class="toc-number">5.</span> <span class="toc-text">el和data的两种写法:</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Object-defineProperty"><span class="toc-number">6.</span> <span class="toc-text">Object.defineProperty()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Vue%E4%B8%AD%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6%EF%BC%9A"><span class="toc-number">7.</span> <span class="toc-text">Vue中事件修饰符：</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%94%AE%E7%9B%98%E4%BA%8B%E4%BB%B6%EF%BC%9A"><span class="toc-number">8.</span> <span class="toc-text">键盘事件：</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7%EF%BC%9A"><span class="toc-number">9.</span> <span class="toc-text">计算属性：</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%9B%91%E8%A7%86%E5%B1%9E%E6%80%A7%EF%BC%9A"><span class="toc-number">10.</span> <span class="toc-text">监视属性：</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%BB%91%E5%AE%9Aclass%E6%A0%B7%E5%BC%8F%EF%BC%9A"><span class="toc-number">11.</span> <span class="toc-text">绑定class样式：</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%BB%91%E5%AE%9Astyle%E6%A0%B7%E5%BC%8F%EF%BC%9A"><span class="toc-number">12.</span> <span class="toc-text">绑定style样式：</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%9D%A1%E4%BB%B6%E6%B8%B2%E6%9F%93%EF%BC%9A"><span class="toc-number">13.</span> <span class="toc-text">条件渲染：</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#v-if"><span class="toc-number">13.1.</span> <span class="toc-text">v-if</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#v-show"><span class="toc-number">13.2.</span> <span class="toc-text">v-show</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#v-for%E6%8C%87%E4%BB%A4%EF%BC%9A"><span class="toc-number">13.3.</span> <span class="toc-text">v-for指令：</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Vue%E7%9B%91%E8%A7%86%E6%95%B0%E6%8D%AE%E7%9A%84%E5%8E%9F%E7%90%86%EF%BC%9A"><span class="toc-number">14.</span> <span class="toc-text">Vue监视数据的原理：</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%A6%82%E4%BD%95%E7%9B%91%E8%A7%86%E6%95%B0%E7%BB%84%E4%B8%AD%E7%9A%84%E6%95%B0%E6%8D%AE%EF%BC%9F"><span class="toc-number">14.1.</span> <span class="toc-text">如何监视数组中的数据？</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%9C%A8Vue%E4%BF%AE%E6%94%B9%E6%95%B0%E7%BB%84%E4%B8%AD%E7%9A%84%E6%9F%90%E4%B8%80%E4%B8%AA%E5%85%83%E7%B4%A0%E4%B8%80%E5%AE%9A%E8%A6%81%E7%94%A8%E5%A6%82%E4%B8%8B%E6%96%B9%E6%B3%95%EF%BC%9A"><span class="toc-number">14.2.</span> <span class="toc-text">在Vue修改数组中的某一个元素一定要用如下方法：</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%94%B6%E9%9B%86%E8%A1%A8%E5%8D%95%E6%95%B0%E6%8D%AE%EF%BC%9A"><span class="toc-number">14.3.</span> <span class="toc-text">收集表单数据：</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%BF%87%E6%BB%A4%E5%99%A8%EF%BC%9A"><span class="toc-number">15.</span> <span class="toc-text">过滤器：</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Vue%E5%85%B6%E4%BB%96%E6%8C%87%E4%BB%A4"><span class="toc-number">16.</span> <span class="toc-text">Vue其他指令</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#v-text%E6%8C%87%E4%BB%A4"><span class="toc-number">16.1.</span> <span class="toc-text">v-text指令</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#v-html%E6%8C%87%E4%BB%A4"><span class="toc-number">16.2.</span> <span class="toc-text">v-html指令</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#v-cloak%E6%8C%87%E4%BB%A4%EF%BC%88%E6%B2%A1%E6%9C%89%E5%80%BC%EF%BC%89"><span class="toc-number">16.3.</span> <span class="toc-text">v-cloak指令（没有值）</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#v-once%E6%8C%87%E4%BB%A4%EF%BC%9A"><span class="toc-number">16.4.</span> <span class="toc-text">v-once指令：</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#v-pre%E6%8C%87%E4%BB%A4%EF%BC%9A"><span class="toc-number">16.5.</span> <span class="toc-text">v-pre指令：</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4%EF%BC%9A-%E5%87%BD%E6%95%B0%E5%BC%8F"><span class="toc-number">17.</span> <span class="toc-text">自定义指令：(函数式)</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%B8%80%E3%80%81%E5%AE%9A%E4%B9%89%E8%AF%AD%E6%B3%95%EF%BC%9A"><span class="toc-number">17.1.</span> <span class="toc-text">一、定义语法：</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BA%8C%E3%80%81%E9%85%8D%E7%BD%AE%E5%AF%B9%E8%B1%A1%E4%B8%AD%E5%B8%B8%E7%94%A8%E7%9A%843%E4%B8%AA%E5%9B%9E%E8%B0%83%EF%BC%9A"><span class="toc-number">17.2.</span> <span class="toc-text">二、配置对象中常用的3个回调：</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%B8%89%E3%80%81%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9"><span class="toc-number">17.3.</span> <span class="toc-text">三、注意事项</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F"><span class="toc-number">18.</span> <span class="toc-text">生命周期</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%B8%B8%E8%A7%81%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90%EF%BC%9A"><span class="toc-number">18.1.</span> <span class="toc-text">常见生命周期钩子：</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%85%B3%E4%BA%8E%E9%94%80%E6%AF%81Vue%E5%AE%9E%E4%BE%8B%EF%BC%9A"><span class="toc-number">18.2.</span> <span class="toc-text">关于销毁Vue实例：</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%A8%A1%E5%9D%97"><span class="toc-number">19.</span> <span class="toc-text">模块</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%BB%84%E4%BB%B6"><span class="toc-number">20.</span> <span class="toc-text">组件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%A8%A1%E5%9D%97%E5%8C%96"><span class="toc-number">21.</span> <span class="toc-text">模块化</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Vue%E4%B8%AD%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8%E7%BB%84%E4%BB%B6"><span class="toc-number">22.</span> <span class="toc-text">Vue中如何使用组件</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%B8%80%E3%80%81%E5%A6%82%E4%BD%95%E5%AE%9A%E4%B9%89%E4%B8%80%E4%B8%AA%E7%BB%84%E4%BB%B6"><span class="toc-number">22.1.</span> <span class="toc-text">一、如何定义一个组件</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BA%8C%E3%80%81%E5%A6%82%E4%BD%95%E6%B3%A8%E5%86%8C%E7%BB%84"><span class="toc-number">22.2.</span> <span class="toc-text">二、如何注册组</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%B8%89%E3%80%81%E7%BC%96%E5%86%99%E7%BB%84%E4%BB%B6%E6%A0%87%E7%AD%BE"><span class="toc-number">22.3.</span> <span class="toc-text">三、编写组件标签</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%B3%A8%E6%84%8F%E7%82%B9%EF%BC%9A"><span class="toc-number">22.4.</span> <span class="toc-text">注意点：</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%85%B3%E4%BA%8EVueComponent%EF%BC%9A"><span class="toc-number">23.</span> <span class="toc-text">关于VueComponent：</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%84%9A%E6%89%8B%E6%9E%B6%E6%96%87%E4%BB%B6%E7%BB%93%E6%9E%84%EF%BC%9A"><span class="toc-number">24.</span> <span class="toc-text">脚手架文件结构：</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#ref%E5%B1%9E%E6%80%A7%EF%BC%9A"><span class="toc-number">25.</span> <span class="toc-text">ref属性：</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%85%8D%E7%BD%AE%E9%A1%B9props%EF%BC%9A"><span class="toc-number">26.</span> <span class="toc-text">配置项props：</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#mixin%EF%BC%88%E6%B7%B7%E5%85%A5%EF%BC%89"><span class="toc-number">27.</span> <span class="toc-text">mixin（混入）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%8F%92%E4%BB%B6%EF%BC%9A"><span class="toc-number">28.</span> <span class="toc-text">插件：</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#scoped%E6%A0%B7%E5%BC%8F"><span class="toc-number">29.</span> <span class="toc-text">scoped样式</span></a></li></ol>
    </div>
  </span>
</div>

    
    <div class="content index py4">
        
        <article class="post" itemscope itemtype="http://schema.org/BlogPosting">
  <header>
    
    <h1 class="posttitle" itemprop="name headline">
        Vue
    </h1>



    <div class="meta">
      <span class="author" itemprop="author" itemscope itemtype="http://schema.org/Person">
        <span itemprop="name">云雪</span>
      </span>
      
    <div class="postdate">
      
        <time datetime="2023-04-04T10:39:06.000Z" itemprop="datePublished">2023-04-04</time>
        
      
    </div>


      
    <div class="article-category">
        <i class="fas fa-archive"></i>
        <a class="category-link" href="/categories/html/">html</a>
    </div>


      
    <div class="article-tag">
        <i class="fas fa-tag"></i>
        <a class="tag-link-link" href="/tags/vue/" rel="tag">vue</a>
    </div>


    </div>
  </header>
  

  <div class="content" itemprop="articleBody">
    <h3 id="初识Vue"><a href="#初识Vue" class="headerlink" title="初识Vue"></a>初识Vue</h3><h3 id="简介"><a href="#简介" class="headerlink" title="简介"></a>简介</h3><p><em><strong>Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。</strong></em></p>
<h3 id="创建Vue实例"><a href="#创建Vue实例" class="headerlink" title="创建Vue实例"></a>创建Vue实例</h3><ol>
<li><p>想要让Vue工作，需要创建一个Vue实例，并且传入一个配置对象；</p>
</li>
<li><p>Vue实例和容器是一对一对应的；</p>
</li>
<li><p>真实开发中只有一个Vue实例，并且会配合组件一起使用</p>
</li>
<li>中的xxx要写成js表达式，xxx会读取data中的所有属性
</li>
<li><p>data中的数据发生改变，那么使用该数据的地方也会自动更新</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">new</span> <span class="title class_">Vue</span>&#123; </span><br><span class="line">	el :<span class="string">&quot; #root&quot;</span></span><br><span class="line">    <span class="attr">data</span>:</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ol>
<h3 id="模板语法"><a href="#模板语法" class="headerlink" title="模板语法"></a>模板语法</h3><ol>
<li><p>插值语法：</p>
<ul>
<li><p>功能：用于解析标签体内容</p>
</li>
<li><p>写法：，xxx是js表达式，且可以直接读取data中的所有属性</p>
</li>
</ul>
</li>
<li><p>指令语法：</p>
<ul>
<li>功能：用于解析标签（包括：标签属性，标签体内容。绑定事件……）</li>
</ul>
</li>
<li><p>数据绑定</p>
</li>
</ol>
<ul>
<li><p>1.单向绑定（v-bind）:数据只能从data流向页面</p>
</li>
<li><p>2.双向绑定（v-model）:数据不仅能从data流向页面，还可以从页面流向data</p>
<blockquote>
<p><em><strong>备注：</strong></em></p>
<ul>
<li><p><em><strong>双向绑定一般都应用在表单类元素上（如：input，select等）</strong></em></p>
</li>
<li><p><em><strong>v-model:value可以简写为 v-model，因为v-model默认收集value值</strong></em></p>
</li>
<li><p><em><strong>v-bind:value简写为 :value</strong></em></p>
</li>
</ul>
</blockquote>
</li>
</ul>
<h3 id="el和data的两种写法"><a href="#el和data的两种写法" class="headerlink" title="el和data的两种写法:"></a>el和data的两种写法:</h3><ul>
<li><p>el两种写法：</p>
<ul>
<li><p>new Vue时候配置el属性 <code>el:&#39;root&#39;</code></p>
</li>
<li><p>先创建Vue实例，随后再通过vm.$mount(‘#root’)指定el的值</p>
</li>
</ul>
</li>
<li><p>data有两种写法</p>
<ul>
<li><p>对象式 <code>data:&#123;&#125;</code></p>
</li>
<li><p>函数式：<code>data()&#123;&#125;</code></p>
</li>
</ul>
</li>
</ul>
<p><em><strong>备注：由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了</strong></em></p>
<h3 id="Object-defineProperty"><a href="#Object-defineProperty" class="headerlink" title="Object.defineProperty()"></a>Object.defineProperty()</h3><ol>
<li><p><em><code>数据代理</code>：<strong>通过一个对象代理对另一个对象中属性的操作（读&#x2F;写）</strong></em></p>
</li>
<li><p><strong>事件的基本用法：</strong></p>
</li>
</ol>
<ul>
<li><p><em>使用v-on:xxx 或者 @xxx绑定事件，其中xxx是事件名</em></p>
</li>
<li><p><em>事件的回调需要配置在methods对象中，最终会在vm上</em></p>
<ul>
<li><p><em>methods中配置的函数，不要使用箭头函数！否则this不在是vm了</em></p>
</li>
<li><p><em>methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或者组件实例对象</em></p>
</li>
<li><p><em>@click&#x3D;“demo()”和@click&#x3D;“demo($event)”效果一样，但是后者可以传参</em></p>
</li>
</ul>
</li>
</ul>
<h3 id="Vue中事件修饰符："><a href="#Vue中事件修饰符：" class="headerlink" title="Vue中事件修饰符："></a>Vue中事件修饰符：</h3><ol>
<li><code>prevent</code>:阻止默认事件（常见）</li>
<li><code>stop</code>:阻止事件冒泡（常用）</li>
<li><code>once</code>：事件只触发一次（常用）</li>
<li><code>capture</code>：使用事件的捕获模式</li>
<li><code>self</code>：只有event.target是当前操作的元素时才能触发事件</li>
<li><code>passive</code>：事件的默认行为立即执行，无需等待事件回调执行完毕</li>
</ol>
<h3 id="键盘事件："><a href="#键盘事件：" class="headerlink" title="键盘事件："></a>键盘事件：</h3><ul>
<li>Vue中常见的按键别名：</li>
</ul>
<blockquote>
<p>​	<strong>回车</strong>：<code>enter</code></p>
<p>​	<strong>删除</strong>：<code>delet</code></p>
<p>​	<strong>退出</strong>：<code>esc</code></p>
<p>​	<strong>空格</strong>：<code>space</code></p>
<p>​	<strong>换行</strong>：<code>tab</code> （配合<code>keydown</code>使用）</p>
<p>​	<strong>上：</strong><code>up</code></p>
<p>​	<strong>下</strong>：<code>down</code></p>
<p>​	<strong>左</strong>：<code>left</code></p>
<p>​	右：<code>right</code></p>
</blockquote>
<ul>
<li>Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case(短横线命名)</li>
<li>系统修饰按键（用法特殊）：Ctrl、alt、shift、meta<ul>
<li><p>配合<code>keyup</code>使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发</p>
</li>
<li><p>配合<code>keydown</code>使用：正常触发事件</p>
</li>
</ul>
</li>
<li>也可以使用<code>keycode</code>去指定具体的按键（不推荐）</li>
<li><code>Vue.config.keyCodes.</code>自定义键名 &#x3D; 键码，可以去定制按键别名</li>
</ul>
<h3 id="计算属性："><a href="#计算属性：" class="headerlink" title="计算属性："></a>计算属性：</h3><ol>
<li><p>​	定义：要用的属性不存在，要通过已有的属性计算得来</p>
</li>
<li><p>​	原理：底层借助了<code>Object.defineproperty</code>方法提供的getter和setter</p>
</li>
</ol>
<blockquote>
<p>​	<strong>get函数什么时候被执行：</strong></p>
<p>​			<strong>1.初次读取时会执行一次</strong></p>
<p>​			<strong>2.当依赖的数据发生改变时会被再次调用</strong></p>
<p><strong>优势：与methods实现相比，内部有缓存机制（复用）,效率高，调试方便</strong></p>
<p><strong>备注：算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变</strong></p>
</blockquote>
<h3 id="监视属性："><a href="#监视属性：" class="headerlink" title="监视属性："></a>监视属性：</h3><p>​	1. 当监视的属性发生变化时，回调函数自动调用，进行相关操作</p>
<p>​	2. 监视的属性必须存在，才能进行监视！！</p>
<p>​	3. 监视的两种写法：</p>
<ul>
<li>new Vue时传入watch配置</li>
<li>通过vm.$watch配置</li>
</ul>
<p><strong>深度监视</strong>：</p>
<ul>
<li><p>​	1. Vue中watch默认不监视对象内部值的改变（一层）</p>
</li>
<li><p>​	2.配置deep:true可以监视对象内部值改变（多层）</p>
</li>
</ul>
<p><strong>备注：</strong></p>
<ul>
<li><p>​	Vue自身可以监视对象内部值的改变，但Vue提供的watch默认不可以！</p>
</li>
<li><p>​	使用watch时根据数据的具体结构，决定是否采用深度监视</p>
</li>
</ul>
<p>​           </p>
<blockquote>
<p><em><strong>computed和watch之间的区别：</strong></em>      </p>
<p>​	1.computed能完成的功能，watch都可以完成。</p>
<p>​	2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作</p>
<p><strong>两个重要的小原则：</strong></p>
<p>​	1.所被Vue<em>管理的函数</em>，最好都写成普通函数，这样this的指向才是vm或组件实例对象</p>
<p>​	2.所有不被Vue管理的函数（定时器的回调函数、ajax的回调函数、Promise的回调函数等），最好写成箭头函数，这样this的指向才是vm或组件实例对象。</p>
</blockquote>
<h3 id="绑定class样式："><a href="#绑定class样式：" class="headerlink" title="绑定class样式："></a>绑定class样式：</h3><ol>
<li><strong>写法：</strong><code>:class =&quot;xxx&quot;</code>xxx可以是字符串、对象、数组</li>
<li><strong>字符串写法</strong>：适用于样式名不确定，需要动态指定</li>
<li><strong>数组写法：</strong>适用于要绑定的样式个数不确定、名字也不确定</li>
<li><strong>对象写法：</strong> 适用于要绑定的样式个数确定，名字也确定，但要动态决定用不用</li>
</ol>
<h3 id="绑定style样式："><a href="#绑定style样式：" class="headerlink" title="绑定style样式："></a>绑定style样式：</h3><p>​		<strong>写法：</strong></p>
<p>​			<strong>对象写法：</strong> <code>:style = &quot;&#123;forntSize:xxx &#125;&quot;</code>其中xxx是动态值</p>
<p>​			<strong>数组写法：</strong><code>:style = &quot;[a,b]&quot;</code>其他a,b是样式对象</p>
<h3 id="条件渲染："><a href="#条件渲染：" class="headerlink" title="条件渲染："></a>条件渲染：</h3><h4 id="v-if"><a href="#v-if" class="headerlink" title="v-if"></a>v-if</h4><p>​		<strong>写法：</strong>	<code>v-if = &quot;表达式&quot;</code></p>
<p>​						<code>v-else-if = &quot;表达式&quot;</code></p>
<p>​						<code>v-else</code> </p>
<p>​		<strong>适用于：</strong>切换频率较低的场景</p>
<p>​		<strong>特点：</strong>不展示的<code>DOM元素</code>直接被移除</p>
<p>​		<strong>注意：</strong><code>v-if</code>可以和<code>v-else-if</code>、<code>v-else</code>一起使用，但要求结构不能被打断</p>
<h4 id="v-show"><a href="#v-show" class="headerlink" title="v-show"></a>v-show</h4><p>​			<strong>写法：</strong><code>v-show = &quot;表达式&quot;</code></p>
<p>​			<strong>适用于：</strong>切换频率较高的场景</p>
<p>​			<strong>特点：</strong>不展示的<code>DOM元素</code>未被移除，仅仅是使用样式隐藏掉</p>
<blockquote>
<p><strong>备注：</strong></p>
<p>​			使用<code>v-if</code>的时候，元素可能无法获取到，而使用<code>v-show</code>一定可以获取到 </p>
</blockquote>
<h4 id="v-for指令："><a href="#v-for指令：" class="headerlink" title="v-for指令："></a>v-for指令：</h4><ul>
<li><strong>作用：</strong>用于展示列表数据</li>
<li><strong>语法：</strong><code>v-for =&quot;（item，index）in xxx  &quot;:key =&quot;yyy&quot;</code></li>
<li><strong>可遍历：</strong>数组、对象、字符串（用的很少）、指定次数（用的很少 ）</li>
</ul>
<blockquote>
<p><em><strong>面试题：react、vue中key有什么用？（key的内部原理）</strong></em></p>
<p>​	<em><strong>1.虚拟DOM中key的作用：</strong></em></p>
<p>​	key是虚拟DOM对象的标识，当状态中的数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】</p>
<p>​	随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异对比，比较规则如下：</p>
<p>​	<em><strong>2.对比规则：</strong></em></p>
<p>​	（1）旧虚拟DOM中找到了与新虚拟DOM相同的key：</p>
<p>​				若虚拟DOM中内容没变，直接使用之前的真实DOM</p>
<p>​				若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM</p>
<p>​	（2）虚拟DOM中未找到与新虚拟DOM相同的key</p>
<p>​				创建新的真实DOM，随后渲染到页面</p>
<p><em><strong>3.用index作为key可能会引发的问题：</strong></em></p>
<p>​		1.若对数据进行：逆序添加、逆序删除等破坏顺序操作</p>
<p>​			会产生没有必要的真实DOM更新 –&gt; 界面效果没问题，但效率低</p>
<p>​		2.如果结构中还包含输入类的DOM</p>
<p>​			会产生错误DOM更新–&gt;界面出现问题</p>
<p><em><strong>4.开发中如何选择key？</strong></em></p>
<p>​		1.最好使用每条数据的唯一标识作为key，比如id、手机号、身份证号、学号等唯一值</p>
<p>​		2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表展示</p>
<p>​			使用index作为key是没有问题的     </p>
</blockquote>
<h3 id="Vue监视数据的原理："><a href="#Vue监视数据的原理：" class="headerlink" title="Vue监视数据的原理："></a>Vue监视数据的原理：</h3><ul>
<li><p>vue会监视data中所有层次的数据</p>
<ul>
<li><p>对象中后追加的属性，Vue默认不做响应式处理</p>
</li>
<li><p>如需给后添加的属性做响应式，请使用如下API:</p>
</li>
</ul>
</li>
</ul>
<p>​							<code>Vue.set.(target,propertyName/index,value)</code>或者</p>
<p>​							<code>vm.$set.(target,propertyName/index,value)</code></p>
<h4 id="如何监视数组中的数据？"><a href="#如何监视数组中的数据？" class="headerlink" title="如何监视数组中的数据？"></a>如何监视数组中的数据？</h4><p>​		通过包裹数组更新元素的方法实现，本质是做了两件事： ·</p>
<p>​		（1）调用原生对应的方法对数组进行更新</p>
<p>​		（2）重新解析模板，进而更新页面</p>
<h4 id="在Vue修改数组中的某一个元素一定要用如下方法："><a href="#在Vue修改数组中的某一个元素一定要用如下方法：" class="headerlink" title="在Vue修改数组中的某一个元素一定要用如下方法："></a>在Vue修改数组中的某一个元素一定要用如下方法：</h4><p>​		1.使用这些API:	<code>push()</code>、<code>pop()</code>、<code>shift()</code>、<code>unshift()</code>、<code>splice()</code>、<code>sort()</code>、<code>reverse()</code></p>
<p>​		2.<code>Vue.set()</code> 或<code>vm.$set()</code> </p>
<blockquote>
<p>​	<strong>特别注意：</strong><code>Vue.set()</code> 或<code>vm.$set()</code>不能给<code>vm</code>或<code>vm的根数据对象</code>添加属性！！！</p>
</blockquote>
<h4 id="收集表单数据："><a href="#收集表单数据：" class="headerlink" title="收集表单数据："></a>收集表单数据：</h4><p>​		若：<code>&lt;input type = &quot;text/&quot;&gt;</code>,则v-model收集的是value值，用户输入的就是value值</p>
<p>​		若：<code>&lt;input type = &quot;radio&quot;&gt;</code>，则v-model收集的是value值，且要给标签配置value值</p>
<p>​		若：<code>&lt;input type = &quot;checkbox&quot;&gt;</code></p>
<ul>
<li><p>没有配置input的value属性，那么收集的就是<code>checkbox</code>（勾选 or 未勾选，是布尔值）</p>
</li>
<li><p>配置input的value属性：</p>
<ul>
<li><p><code>v-model</code>的初始值是非数组，那么收集的就是checkbox（勾线 or 未勾选，是布尔值）</p>
</li>
<li><p><code>v-model</code>的初始值是数组，那么收集的就是value组成的数组</p>
</li>
</ul>
</li>
</ul>
<blockquote>
<p> <strong>备注：v-model的三个修饰符：</strong></p>
<p>​		lazy：失去焦点再收集数据</p>
<p>​		number：输入字符串转为有效的数字</p>
<p>​		trim：输入首尾空格过滤  </p>
</blockquote>
<h3 id="过滤器："><a href="#过滤器：" class="headerlink" title="过滤器："></a>过滤器：</h3><p>​	<strong>定义：</strong>对要显示的数据进行特定格式化再显示（适用于一些简单逻辑的处理）</p>
<p>​	<strong>语法：</strong></p>
<p>​		1.注册过滤器：<code>Vue.fileter(name,callback)</code>	或	<code>new Vue(filters:&#123;&#125;)</code></p>
<p>​		2.使用过滤器：<code>&#123;&#123;xxx | 过滤器名&#125;&#125; 或 v-bind:属性 = &quot;xxx | 过滤器名&quot;</code></p>
<blockquote>
<p><strong>备注：</strong></p>
<p>​		1.过滤器也可以接受额外参数、多个过滤器也可以串联</p>
<p>​		2.并没有改变原本的数据，是产生新的对应的数据</p>
</blockquote>
<h3 id="Vue其他指令"><a href="#Vue其他指令" class="headerlink" title="Vue其他指令"></a>Vue其他指令</h3><h4 id="v-text指令"><a href="#v-text指令" class="headerlink" title="v-text指令"></a>v-text指令</h4><p>​		1.作用：向其所在的节点中渲染文本内容</p>
<p>​		2.与插值语法的区别：<code>v-text</code>会替换掉节点中的内容，则不会</p>
<h4 id="v-html指令"><a href="#v-html指令" class="headerlink" title="v-html指令"></a>v-html指令</h4><p>​		1.作用：向指定节点中渲染包含html结构的内容</p>
<p>​		2.与插值语法的区别：</p>
<p>​			（1）<code>v-html</code>会替换掉节点中所有的内容，则不会</p>
<p>​			（2）<code>v-htm</code>l可以识别html结构</p>
<blockquote>
<p>​		<em><strong>严重注意：v-html有安全性问题</strong></em></p>
<ul>
<li><p>在网站上动态渲染任意HTML是非常危险的，容易导致xss攻击</p>
</li>
<li><p>一定要在可信的内容上使用v-html，永远不要再用户提交的内容上</p>
</li>
</ul>
</blockquote>
<h4 id="v-cloak指令（没有值）"><a href="#v-cloak指令（没有值）" class="headerlink" title="v-cloak指令（没有值）"></a>v-cloak指令（没有值）</h4><p>​		1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删除<code>v-cloak</code>属性</p>
<p>​		2.使用<code>css</code>配合<code>v-cloak</code>可以解决网速慢时页面展示出的问题</p>
<h4 id="v-once指令："><a href="#v-once指令：" class="headerlink" title="v-once指令："></a>v-once指令：</h4><p>​		1.<code>v-once</code>所在节点在初次动态渲染后，就视为静态内容了</p>
<p>​		2.以后数据的改变并不会引起<code>v-once</code>所在结构的更新，可以用于优化性能</p>
<h4 id="v-pre指令："><a href="#v-pre指令：" class="headerlink" title="v-pre指令："></a>v-pre指令：</h4><p>​		1.跳过其所在节点的编译过程</p>
<p>​		2.可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译</p>
<h3 id="自定义指令：-函数式"><a href="#自定义指令：-函数式" class="headerlink" title="自定义指令：(函数式)"></a>自定义指令：(函数式)</h3><ul>
<li><p>指令与元素成功绑定时（一上来）</p>
</li>
<li><p>指令所在的模板被重新解析时</p>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">directives</span>:&#123;</span><br><span class="line">	<span class="attr">big</span>:<span class="keyword">function</span>(<span class="params">element,binding</span>)&#123;</span><br><span class="line">		element.<span class="property">innerText</span> = binding.<span class="property">value</span>*<span class="number">10</span> </span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="一、定义语法："><a href="#一、定义语法：" class="headerlink" title="一、定义语法："></a>一、定义语法：</h4><p>​	<strong>1.局部指令：</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span><br><span class="line">	<span class="attr">directives</span>:&#123;指令名:配置对象&#125;</span><br><span class="line">&#125;)</span><br><span class="line">或</span><br><span class="line"><span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span><br><span class="line">	<span class="attr">directives</span>:&#123;指令名:回调函数&#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p>​	<strong>2.全局指令：</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="title class_">Vue</span>.<span class="title function_">dircetive</span>(指令名,配置对象)或者<span class="title class_">Vue</span>.<span class="title function_">directive</span>(指令名,回调函数)</span><br></pre></td></tr></table></figure>

<h4 id="二、配置对象中常用的3个回调："><a href="#二、配置对象中常用的3个回调：" class="headerlink" title="二、配置对象中常用的3个回调："></a>二、配置对象中常用的3个回调：</h4><ul>
<li><strong>bind：</strong>指令与元素绑定时调用</li>
<li><strong>inserted：</strong>指令所在元素被插入页面时调用</li>
<li><strong>update：</strong>指令所在模板结构被重新解析时调用</li>
</ul>
<h4 id="三、注意事项"><a href="#三、注意事项" class="headerlink" title="三、注意事项"></a>三、注意事项</h4><ul>
<li><p>指令定义时不加v-，但使用时要加v-</p>
</li>
<li><p>指令名如果是多个单词，要使用kebab-case命名方式，不要用cameCase命名</p>
</li>
</ul>
<h3 id="生命周期"><a href="#生命周期" class="headerlink" title="生命周期"></a>生命周期</h3><ul>
<li><p><strong>别名：</strong><em>生命周期回调函数</em>、<em>生命周期函数</em>、<em>生命周期钩子</em></p>
</li>
<li><p><strong>定义：</strong><code>Vue</code>在关键时刻帮我们调用一些特殊名称的函数</p>
</li>
<li><p>生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的</p>
</li>
<li><p>生命周期函数中的<code>this</code>指向是<code>vm</code>或<code>组件实例对象(vc)</code></p>
</li>
</ul>
<h4 id="常见生命周期钩子："><a href="#常见生命周期钩子：" class="headerlink" title="常见生命周期钩子："></a>常见生命周期钩子：</h4><ul>
<li><p>​	<code>mounted</code>：发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】</p>
</li>
<li><p>​	<code>beforeDestroy</code>：清除定时器、解绑自定义事件、取消订阅消息等【首尾工作】</p>
</li>
</ul>
<h4 id="关于销毁Vue实例："><a href="#关于销毁Vue实例：" class="headerlink" title="关于销毁Vue实例："></a>关于销毁Vue实例：</h4><ul>
<li><p>销毁后借助Vue开发者工具看不到任何信息</p>
</li>
<li><p>销毁后自定义事件会失效，但原生DOM事件依然有效</p>
</li>
<li><p>一般不会再<code>beforeDestroy</code>操作数据，因为即使操作数据，也不会再更新流程了</p>
</li>
</ul>
<h3 id="模块"><a href="#模块" class="headerlink" title="模块"></a>模块</h3><p>​	1.<strong>理解</strong>：向外提供特定功能的js程序，一般就是一个js文件</p>
<p>​	2.<strong>为什么</strong>：<code>js</code>文件很多很复杂</p>
<p>​	3.<strong>作用</strong>：复用<code>js</code>，简化<code>js</code>的编写，提高<code>js</code>运行效率</p>
<h3 id="组件"><a href="#组件" class="headerlink" title="组件"></a>组件</h3><p>​	1.<strong>理解</strong>：用来实现局部（特定）功能效果的代码集合</p>
<p>​	2**.为什么**：一个界面的功能很复杂</p>
<p>​	3**.作用**：复用编码，简化项目编程，提高运行系效率</p>
<h3 id="模块化"><a href="#模块化" class="headerlink" title="模块化"></a>模块化</h3><p>​	当应用中的js都以模块来编写时，那这个应用就是一个模块化的应用 </p>
<h3 id="Vue中如何使用组件"><a href="#Vue中如何使用组件" class="headerlink" title="Vue中如何使用组件"></a>Vue中如何使用组件</h3><p>​	1.定义组件（创建组件）</p>
<p>​	2.注册组件</p>
<p>​	3.使用组件（写组件标签）</p>
<h4 id="一、如何定义一个组件"><a href="#一、如何定义一个组件" class="headerlink" title="一、如何定义一个组件"></a>一、如何定义一个组件</h4><ul>
<li><p>使用<code>Vue.extend(options)</code>创建，其中<code>option</code>和<code>new Vue(option)</code>时传入的那个<code>option</code>几乎一样，但区别如下：</p>
<ul>
<li><p>​	<code>el</code>不要写，为什么？——最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器</p>
</li>
<li><p>​	<code>data</code>必须写成函数式，为什么？——避免组件被复用时，数据存在应用关系</p>
</li>
</ul>
</li>
<li><p>备注：使用<code>template标签</code>可以配置组件结构</p>
</li>
</ul>
<h4 id="二、如何注册组"><a href="#二、如何注册组" class="headerlink" title="二、如何注册组"></a>二、如何注册组</h4><p>​		1.局部注册：靠<code>new Vue</code>的时候传入<code>components</code>选项</p>
<p>​		2.全局注册：靠<code>Vue.componnet(&#39;组件名&#39;,组件)</code></p>
<h4 id="三、编写组件标签"><a href="#三、编写组件标签" class="headerlink" title="三、编写组件标签"></a>三、编写组件标签</h4><p>​		例如：<code>&lt;school&gt;&lt;/school &gt;</code></p>
<h4 id="注意点："><a href="#注意点：" class="headerlink" title="注意点："></a>注意点：</h4><p>​	<strong>1.关于组件名</strong></p>
<p>​		<em>一个单词组成：</em></p>
<ul>
<li><p>第一种写法：（首字母小写）：school</p>
</li>
<li><p>第二种写法：（首字母大写）：School</p>
</li>
</ul>
<p>​		<em>多个单词组成：</em></p>
<ul>
<li><p>第一种写法：（kebab-case命名）：my-school</p>
</li>
<li><p>第二种写法：（CamelClase命名）：MySchool（需要Vue脚手架）</p>
</li>
</ul>
<blockquote>
<p>备注：</p>
<p>​	（1）组件名尽可能回避HTML中已有的元素名称，例如：h2,H2都不行</p>
<p>​	（2）可以使用name配置项指定组件在开发者工具中呈现的名字</p>
</blockquote>
<p>​	<strong>2.关于组件标签</strong></p>
<ul>
<li><p>第一种写法：<code>&lt;school&gt;&lt;/school&gt;</code></p>
</li>
<li><p>第二种写法：<code>&lt;school/&gt;</code></p>
</li>
</ul>
<blockquote>
<p>​	备注：不用使用脚手架时，<school/>会导致后续组件不能渲染</p>
</blockquote>
<p>​	<strong>3.一个简写方式：</strong></p>
<p>​		<code>const school = Vue.extend(options)</code> 可简写为：<code>const school = options</code></p>
<h3 id="关于VueComponent："><a href="#关于VueComponent：" class="headerlink" title="关于VueComponent："></a>关于VueComponent：</h3><p>​		1.school组件本质是一个名为<code>VueComponent</code>的构造函数，且不是程序员定义的，是<code>Vue.extend</code>生成的</p>
<p>​		2.我们只需要写<school/>或者<school></school>，Vue解析时会帮我们创建school组件的实例对象</p>
<p>​		3.特别注意：每次调用<code>Vue.extend</code>，返回的都是一个全新的VueComponent！！！</p>
<p>​		<strong>4.关于this指向：</strong></p>
<p>​			(1)组件配置中：</p>
<p>​				data函数、methods中的函数、watch中的函数、computed中的函数，他们的this均是<code>【VueComponent实例对象】</code></p>
<p>​			(2)new Vue（options）配置中</p>
<p>​				data函数、methods中的函数、watch中的函数、computed中的函数，他们的this均是<code>【Vue例对象】</code></p>
<p>​		5.VueComponent的实例对象，以后简称<code>vc</code>（也可称为：组件实例对象）</p>
<p>​			Vue的实例对象，以后简称<code>vm</code>  </p>
<blockquote>
<p>1.一个重要的内置关系：<code>VueComponent.prototype.____proto___=== Vue.prototype</code></p>
<p>2.为什么要有这个关系：让组件实例对象（vc）可以访问到Vue原型上的属性和方法 </p>
</blockquote>
<blockquote>
<p><strong>关于不同版本的Vue:</strong></p>
<p>1.vue.js与vue.runtime.xxx.js的区别：</p>
<p>​	（1）vue.js是完整版的Vue，包含：核心功能+模板解析器</p>
<p>​	（2）vue.runtime.xxx.js是运行版的Vue，只包含：核心功能，没有模板解析器</p>
<p>2.因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体内容</p>
</blockquote>
<h3 id="脚手架文件结构："><a href="#脚手架文件结构：" class="headerlink" title="脚手架文件结构："></a>脚手架文件结构：</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line">|—–node_modules</span><br><span class="line"></span><br><span class="line">|–—public</span><br><span class="line"></span><br><span class="line">|		|__favicon.<span class="property">ico</span>：页签图标</span><br><span class="line"></span><br><span class="line">|		|__index.<span class="property">html</span>：主页面</span><br><span class="line"></span><br><span class="line">|——src</span><br><span class="line"></span><br><span class="line">|		|—assets：存放静态资源</span><br><span class="line"></span><br><span class="line">|		|		|__logo.<span class="property">png</span></span><br><span class="line"></span><br><span class="line">|		|—component：存放组件</span><br><span class="line"></span><br><span class="line">|		|		|__HelloWorld.<span class="property">vue</span></span><br><span class="line"></span><br><span class="line">|		|—<span class="title class_">App</span>.<span class="property">vue</span>：汇总所有组件</span><br><span class="line"></span><br><span class="line">|		|—main.<span class="property">js</span>：入口文件</span><br><span class="line"></span><br><span class="line">|—–.<span class="property">gitignore</span>：git版本管理忽略的配置</span><br><span class="line"></span><br><span class="line">|—–babel.<span class="property">config</span>.<span class="property">js</span>：babel的配置文件</span><br><span class="line"></span><br><span class="line">|—–package.<span class="property">json</span>：应用包配置文件</span><br><span class="line"></span><br><span class="line">|—–<span class="variable constant_">README</span>.<span class="property">md</span>：应用描述文件</span><br><span class="line"></span><br><span class="line">|—–package.<span class="property">lock</span>.<span class="property">json</span>：包版本控制文件</span><br></pre></td></tr></table></figure>

<blockquote>
<p><strong>vue.config.js配置文件</strong></p>
<p>​	1.使用vue.inspect &gt; output.js可以查看Vue脚手架的默认配置</p>
<p>​	2.使用vue.config.js可以对脚手架进行个性化定制，详情见官网 </p>
</blockquote>
<h3 id="ref属性："><a href="#ref属性：" class="headerlink" title="ref属性："></a>ref属性：</h3><ul>
<li><p>被用来给元素或子组件注册引用消息（id的替代者）</p>
</li>
<li><p>应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）</p>
</li>
<li><p>使用方式：</p>
<ul>
<li><p>​	打标识：<code>&lt;h1 ref ==“xxx”&gt;………&lt;/h1&gt;</code> 或 <code>&lt;School ref  = “xxx&quot;&gt;&lt;/School&gt;</code></p>
</li>
<li><p>​	获取：<code>this.$refs.xxx</code></p>
</li>
</ul>
</li>
</ul>
<h3 id="配置项props："><a href="#配置项props：" class="headerlink" title="配置项props："></a>配置项props：</h3><p>​	<strong>功能：让组件接受外部传过来的数据</strong></p>
<p>​	（1）传递数据</p>
<p>​			<code>&lt;School :name = “xxx&quot;/&gt;</code></p>
<p>​	（2）接收数据：</p>
<p>​			第一种方式（只接收）</p>
<p>​			<code>props：[&#39;name&#39;]</code></p>
<p>​			第二种方式（限制类型）</p>
<p>​			<code>props：&#123; name:String &#125;</code></p>
<p>​			第三种方式（限制类型，限制必要性，指定默认值）：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">props：&#123;</span><br><span class="line">		name：&#123;</span><br><span class="line"></span><br><span class="line">		type：<span class="title class_">String</span>， （类型）</span><br><span class="line"></span><br><span class="line">		required：<span class="literal">true</span>（必要性）</span><br><span class="line"></span><br><span class="line">		<span class="keyword">default</span>：‘老王’（默认值）</span><br><span class="line"></span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>备注：props是只读，Vue底层会检测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。</p>
</blockquote>
<h3 id="mixin（混入）"><a href="#mixin（混入）" class="headerlink" title="mixin（混入）"></a>mixin（混入）</h3><ul>
<li><p><strong>功能：</strong>可以把多个组件共用的配置提取成一个混入对象</p>
</li>
<li><p><strong>使用方式：</strong></p>
<ul>
<li>第一步定义混合，例如：</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#123;		</span><br><span class="line">	data（）&#123;……&#125;,</span><br><span class="line">	<span class="attr">methods</span>:&#123;…..&#125;</span><br><span class="line">	……..</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li><p>第二步使用混入，例如：</p>
<p>​		1. 全局混入：<code>Vue.mixin(xxx)</code></p>
<p>​		2.局部混入：<code>mixins:[&#39;xxx&#39;]</code></p>
</li>
</ul>
</li>
</ul>
<h3 id="插件："><a href="#插件：" class="headerlink" title="插件："></a>插件：</h3><ul>
<li><p>​	<strong>功能：</strong>用于增强Vue</p>
</li>
<li><p>​	<strong>本质：</strong>包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据</p>
</li>
<li><p>​	<strong>定义插件：</strong></p>
</li>
</ul>
<blockquote>
<p>​		对象.install &#x3D; function（Vue，options）{</p>
<p>​				1.添加全局过滤器</p>
<p>​					Vue.filter(…..)</p>
<p>​				2.添加全局指令</p>
<p>​					Vue.directive(……..)</p>
<p>​				3.配置全局混入</p>
<p>​					Vue.mixin(……..)</p>
<p>​				4.添加实例方法	</p>
<p>​					Vue.prototype.$myMethod &#x3D; function（）{……}</p>
<p>​					Vue.prototype.$myProperty &#x3D; xxxx</p>
<p>​			}</p>
<p>​	使用插件：Vue.use（plugins）</p>
</blockquote>
<h3 id="scoped样式"><a href="#scoped样式" class="headerlink" title="scoped样式"></a>scoped样式</h3><ul>
<li><p>作用：让样式在局部生效，防止冲突</p>
</li>
<li><p>写法：&#96;<style scoped></p>
</li>
</ul>
<h3 id="WebStorage（浏览器本地存储）"><a href="#WebStorage（浏览器本地存储）" class="headerlink" title="WebStorage（浏览器本地存储）"></a>WebStorage（浏览器本地存储）</h3><p>​			1.存储内容大小一般支持5M左右（不同浏览器可能不一样）</p>
<p>​			2.浏览器端通过<code>Window.sessionStorage</code>和<code>Window.localStorage</code>属性来实现本地存储机制</p>
<p>​			<strong>3.相关API</strong></p>
<p>​					1.<code>xxxStorage.setItem( ‘key’ , ‘value’)</code></p>
<p>​						该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新器对应的值</p>
<p>​					2.<code>xxxxStorage.getItem (‘person’)</code></p>
<p>​						该方法接受一个键名作为参数，返回键名对应的值</p>
<p>​					3.<code>xxxStorage.removeItem(‘key’)</code></p>
<p>​						该方法接受一个键名作为参数，并把该键名从存储中删除</p>
<p>​					4.<code>xxxxStorage.clear()</code></p>
<p>​						该方法会清空存储中的所有的数据</p>
<blockquote>
<p>​			<strong>4.备注：</strong></p>
<p>​					1.SessionStorage存储的内容会随着浏览器窗口关闭而消失</p>
<p>​					2.LocalStorage存储的内容，需要手动清除才会消失</p>
<p>​					3.xxxxStorage.gitItem(xxx)如果xxx对应的value获取不到，那么getItem的返回值是null</p>
<p>​					4.JSON.parse(null)的结果依然是null</p>
</blockquote>
<h3 id="组件的自定义事件"><a href="#组件的自定义事件" class="headerlink" title="组件的自定义事件"></a>组件的自定义事件</h3><p>​		1.<strong>定义：</strong>一种组件间通信的方式，适用于 子组件&#x3D;&#x3D;&#x3D;&gt;父组件</p>
<p>​		2.<strong>使用场景：</strong>A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）</p>
<p>​		3.<strong>绑定自定义事件：</strong></p>
<p>​				1.第一种方式，在父组件中：<code>&lt;Demo @atguigu = “test”/&gt;</code>或<code>&lt;Demo v-on:atguigu = “test&quot;/&gt;</code></p>
<p>​				2.第二种方式，在父组件中：				</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&lt;<span class="title class_">Demo</span> ref = <span class="string">&quot;demo&quot;</span>&gt;</span><br><span class="line">.....</span><br><span class="line"><span class="title function_">mounted</span>(<span class="params"></span>)&#123;</span><br><span class="line">	<span class="variable language_">this</span>.<span class="property">$refs</span>.<span class="property">xxx</span>.$on(<span class="string">&#x27;atguigu&#x27;</span>,<span class="variable language_">this</span>.<span class="property">test</span>)</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>​				3.若想让自定义事件只触发一次，可以使用once修饰符，或<code>$once方法</code> </p>
<p>​				4.触发自定义事件: this.$emit(‘atguitu’,数据)</p>
<p>​				5.解绑自定义事件：this.$off(‘atguigu’)</p>
<p>​				6.组件上可以绑定原生DOM事件，需要使用native修饰符</p>
<p>​				7.注意：通过<code>this.$ref.xxx.$on(&#39;atguigu&#39;,回调)</code>绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出现问题！ </p>
<h3 id="全局事件总线（GlobalEvenBus）"><a href="#全局事件总线（GlobalEvenBus）" class="headerlink" title="全局事件总线（GlobalEvenBus）"></a>全局事件总线（GlobalEvenBus）</h3><ul>
<li><p>一种组件间通信的方式,适用于任意组件间通信</p>
</li>
<li><p>安装全局事件总线:</p>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span><br><span class="line">	....</span><br><span class="line">	<span class="title function_">beforeCreate</span>(<span class="params"></span>)&#123;</span><br><span class="line">		<span class="title class_">Vue</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">$bus</span> = <span class="variable language_">this</span> <span class="comment">//安装全局事件总线，$bus就是当前应用的vm</span></span><br><span class="line">	&#125;,</span><br><span class="line">	....</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<ul>
<li><p>使用事件总线：</p>
<ul>
<li>接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身</li>
<li>提供数据：<code>this.$bus.$emit(‘xxx’,数据)</code></li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">methods</span>(<span class="params"></span>)&#123;</span><br><span class="line">	<span class="title function_">demo</span>(<span class="params">data</span>)&#123;...&#125;</span><br><span class="line">&#125;,</span><br><span class="line">....</span><br><span class="line"><span class="title function_">mounted</span>(<span class="params"></span>)&#123;</span><br><span class="line">	<span class="variable language_">this</span>.<span class="property">$bus</span>.$on(<span class="string">&#x27;xxx&#x27;</span>,<span class="variable language_">this</span>.<span class="property">demo</span>)</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<ul>
<li>最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件</li>
</ul>
<h3 id="消息订阅与发布（pubsub）"><a href="#消息订阅与发布（pubsub）" class="headerlink" title="消息订阅与发布（pubsub）"></a>消息订阅与发布（pubsub）</h3><ul>
<li><p>一种组件间通信的方式，适用于任意组件间通信</p>
</li>
<li><p><strong>使用步骤：</strong></p>
<ul>
<li><p>安装pubsub：<code>npm i pubsub-js</code></p>
</li>
<li><p>引入：<code>import pubsub from ‘pubsub-js</code>’</p>
</li>
</ul>
</li>
<li><p>接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身</p>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">methods</span>(<span class="params"></span>)&#123;</span><br><span class="line">	<span class="title function_">demo</span>(<span class="params">data</span>)&#123;....&#125;</span><br><span class="line">&#125;,</span><br><span class="line">.....</span><br><span class="line"><span class="title function_">mounted</span>(<span class="params"></span>)&#123;</span><br><span class="line">	<span class="variable language_">this</span>.<span class="property">pid</span> = pubsub.<span class="title function_">subscribe</span>(<span class="string">&#x27;xxx&#x27;</span>,<span class="variable language_">this</span>.<span class="property">demo</span>)<span class="comment">//订阅消息</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li><p>提供数据：<code>pubsub.publish(&#39;xxx&#39;,数据)</code>	</p>
</li>
<li><p>最好在<code>beforeDestroy</code>钩子中，用<code>Pubsub.unsubscribe(pid)</code>去&lt;<code>span style = &quot;color:red&quot;&gt;取消订阅&lt;/span&gt;</code></p>
</li>
</ul>
<h3 id="nextTick"><a href="#nextTick" class="headerlink" title="nextTick"></a>nextTick</h3><ul>
<li><strong>语法：</strong><code>this.$nextTick(回调函数)</code></li>
<li><strong>作用：</strong>在下一次DOM更新结束后执行其指定的回调</li>
<li><strong>什么时候用：</strong>当改变数据后，要基于更新后的DOM进行某些操作时，要在nextTick所指定的回调函数中执行</li>
</ul>
<h3 id="Vue封装的过渡与动画"><a href="#Vue封装的过渡与动画" class="headerlink" title="Vue封装的过渡与动画"></a>Vue封装的过渡与动画</h3><ul>
<li><strong>作用：</strong>在插入，更新或移除DOM元素时，在合适的时候给元素添加样式类名</li>
<li><strong>写法：</strong><ul>
<li><strong>准备好样式</strong>：</li>
</ul>
</li>
</ul>
<p>​					元素进入的样式：</p>
<p>​						1.v-enter：进入的起点</p>
<p>​						2.v-enter-active：进入过程中</p>
<p>​						3.v-enter-to：进入的终点</p>
<p>​					元素离开的样式：</p>
<p>​						1.v-leave：离开的起点</p>
<p>​						2.v-leave-active：离开过程中</p>
<p>​						3.v-leave-to：离开的终点</p>
<ul>
<li>使用<code>&lt;transition&gt;</code>包裹要过渡的元素，并配置name属性：</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&lt;transition name = &quot;hello&quot;&gt;</span><br><span class="line">	&lt;h1 v-show = &quot;isShow&quot;&gt; 你好啊！&lt;/h1&gt;</span><br><span class="line"></span><br><span class="line">&lt;/transition&gt;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>备注：若有多个元素需要过渡，在需要使用：<code>&lt;transition-group&gt;</code>,且每个元素都要指定<code>key</code>值  </p>
</blockquote>
<h3 id="vue脚手架配置代理"><a href="#vue脚手架配置代理" class="headerlink" title="vue脚手架配置代理"></a>vue脚手架配置代理</h3><ul>
<li><strong>方法一：</strong></li>
</ul>
<p>​		在vue.config.js中添加如下配置：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">devServer</span>:&#123;</span><br><span class="line">	<span class="attr">proxy</span>:<span class="string">&quot;http://localhost:5000&quot;</span></span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>​	说明：</p>
<p>​			1.优点：配置简单，请求资源时直接发给前端（8080）即可</p>
<p>​			2.缺点：不能配置多个代理，不能灵活的控制请求是否走代理</p>
<p>​			3.工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器（优先匹配前端资源）</p>
</blockquote>
<ul>
<li><strong>方法二：</strong></li>
</ul>
<p>​		编写vue.config.js配置具体代理规则：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">	<span class="attr">derServer</span>:&#123;</span><br><span class="line">	<span class="attr">proxy</span>:&#123;</span><br><span class="line">		<span class="string">&#x27;api1&#x27;</span>:&#123;	<span class="comment">//匹配所以以&#x27;/api1&#x27;开头的请求路径</span></span><br><span class="line">		<span class="attr">target</span>: <span class="string">&#x27;http://localhost:5000&#x27;</span></span><br><span class="line">		<span class="attr">changeOrigin</span>:<span class="literal">true</span>,</span><br><span class="line">		<span class="attr">pathRewrite</span>:&#123;<span class="string">&#x27;^/api&#x27;</span>:<span class="string">&#x27;&#x27;</span>&#125;	<span class="comment">//路径重定向</span></span><br><span class="line">		&#125;，</span><br><span class="line">		<span class="string">&#x27;api2&#x27;</span>:&#123;	<span class="comment">//匹配所以以&#x27;/api&#x27;开头的请求路径</span></span><br><span class="line">		<span class="attr">target</span>: <span class="string">&#x27;http://localhost:5000&#x27;</span></span><br><span class="line">		<span class="attr">changeOrigin</span>:<span class="literal">true</span>,</span><br><span class="line">		<span class="attr">pathRewrite</span>:&#123;<span class="string">&#x27;^/api2&#x27;</span>:<span class="string">&#x27;&#x27;</span>&#125;<span class="comment">//路径重定向</span></span><br><span class="line">		&#125;</span><br><span class="line">	  &#125;</span><br><span class="line">   &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">changeOrigin设置为true时，服务器收到的请求头中的host为，localhost:5000 (既是说谎)</span></span><br><span class="line"><span class="comment">changeOrigin设置为false时，服务器收到的请求头中的host为,localhost:8080 (不说慌)</span></span><br><span class="line"><span class="comment">changeOrigin默认是true</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">*/</span></span><br></pre></td></tr></table></figure>

<blockquote>
<p>说明：</p>
<p>​	1.优点：可以配置多个代理，且可以灵活的控制请求是否走代理</p>
<p>​	2.缺点：配置略微繁琐，请求资源时必须加前缀</p>
</blockquote>
<h3 id="插槽："><a href="#插槽：" class="headerlink" title="插槽："></a>插槽：</h3><p>​	1.<strong>作用：</strong>让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件&#x3D;&#x3D;&#x3D;&gt;子组件</p>
<p>​	2.<strong>分类：</strong>默认插槽、具名插槽、作用域插槽</p>
<p>​	3.<strong>使用方式：</strong></p>
<p>​		<strong>1.默认插槽</strong></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">父组件中:</span><br><span class="line">	&lt;Category&gt;</span><br><span class="line">		&lt;div&gt;html结构1&lt;/div&gt;</span><br><span class="line">	&lt;Category&gt;</span><br><span class="line">子组件中:</span><br><span class="line">	&lt;template&gt;</span><br><span class="line">		&lt;div&gt;</span><br><span class="line">			&lt;!--定义插槽--&gt;</span><br><span class="line">			&lt;slot&gt;插槽默认内容...&lt;/slot&gt;</span><br><span class="line">		&lt;/div&gt;</span><br><span class="line">	&lt;template&gt;</span><br></pre></td></tr></table></figure>

<p>​		<strong>2.具名插槽</strong></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">父组件中:</span><br><span class="line">	&lt;Category&gt;</span><br><span class="line">		&lt;template slot = &quot;center&quot;&gt;</span><br><span class="line">			&lt;div&gt;html结构1&lt;/div&gt;</span><br><span class="line">		&lt;template&gt;</span><br><span class="line">		</span><br><span class="line">		&lt;template v-slot:footer&gt;</span><br><span class="line">			&lt;div&gt;html结构2&lt;/div&gt;</span><br><span class="line">		&lt;template&gt;</span><br><span class="line">	&lt;Category&gt;</span><br><span class="line">子组件中:</span><br><span class="line">		&lt;template&gt;</span><br><span class="line">			&lt;div&gt;</span><br><span class="line">				&lt;!--定义插槽--&gt;</span><br><span class="line">				&lt;slot name = &quot;center&quot;&gt;插槽默认内容...&lt;/slot&gt;</span><br><span class="line">				&lt;slot name = &quot;footer&quot;&gt;插槽默认内容...&lt;/slot&gt;</span><br><span class="line">			&lt;/div&gt;</span><br><span class="line">		&lt;/template&gt;</span><br><span class="line">		</span><br></pre></td></tr></table></figure>

<p>​		<strong>3.作用域插槽</strong></p>
<p>​			1.理解：<em><strong>数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。</strong></em></p>
<p>​					（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）</p>
<p>​			2.具体编码：	</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line">父组件中:</span><br><span class="line">	&lt;Category&gt;</span><br><span class="line">		&lt;template scope = &quot;scopeData&quot;&gt;</span><br><span class="line">		&lt;!--生成的是ul列表--&gt;</span><br><span class="line">			&lt;ul&gt;</span><br><span class="line">				&lt;li v-for = &quot;g in scopeData.games&quot; :key = &quot;g&quot;&gt;&#123;&#123;g&#125;&#125;&lt;/li&gt;</span><br><span class="line">			&lt;/ul&gt;</span><br><span class="line">		&lt;/template&gt;</span><br><span class="line">	&lt;/Category&gt;</span><br><span class="line">	</span><br><span class="line">		&lt;Category&gt;</span><br><span class="line">		&lt;template slot-scope = &quot;scopeData&quot;&gt;</span><br><span class="line">		&lt;!--生成的是h4列表--&gt;</span><br><span class="line">				&lt;h4 v-for = &quot;g in scopeData.games&quot; :key = &quot;g&quot;&gt;&#123;&#123;g&#125;&#125;&lt;/h4&gt;</span><br><span class="line">		&lt;/template&gt;</span><br><span class="line">	&lt;/Category&gt;</span><br><span class="line">	</span><br><span class="line">子组件中:</span><br><span class="line">	&lt;template&gt;</span><br><span class="line">		&lt;div&gt;</span><br><span class="line">			&lt;slot :name = &quot;games&quot;/&gt;</span><br><span class="line">        &lt;/div&gt;      </span><br><span class="line">	&lt;template&gt;</span><br><span class="line">	</span><br><span class="line">	&lt;script&gt;</span><br><span class="line">		export default &#123;</span><br><span class="line">			name: &#x27;Category&#x27;</span><br><span class="line">			props:[&#x27;title&#x27;],</span><br><span class="line">			//数据在子组件自身</span><br><span class="line">			data()&#123;</span><br><span class="line">				return&#123;</span><br><span class="line">					games:[&#x27;红色警戒&#x27;,&#x27;穿越火线&#x27;,&#x27;劲舞团&#x27;,&#x27;超级玛丽&#x27;]</span><br><span class="line">				&#125;</span><br><span class="line">			&#125;,</span><br><span class="line">		&#125;</span><br><span class="line">	&lt;/script&gt;</span><br><span class="line">	</span><br></pre></td></tr></table></figure>

<h3 id="搭建Vuex环境"><a href="#搭建Vuex环境" class="headerlink" title="搭建Vuex环境"></a>搭建Vuex环境</h3><p>​	1.创建文件：<code>src/store/store.js</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//引入Vue核心库</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">Vue</span> <span class="keyword">from</span> <span class="string">&#x27;Vue&#x27;</span></span><br><span class="line"><span class="comment">//引入Vuex</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">Vuex</span> <span class="keyword">from</span> <span class="string">&#x27;Vuex&#x27;</span></span><br><span class="line"><span class="comment">//应用Vuex插件</span></span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">Vuex</span>)</span><br><span class="line"><span class="comment">//准备action对象---响应组件中用户发动作</span></span><br><span class="line"><span class="keyword">const</span> action = &#123;&#125;</span><br><span class="line"><span class="comment">//准备mutation对象---修改state中的数据</span></span><br><span class="line"><span class="keyword">const</span> mutation = &#123;&#125;</span><br><span class="line"><span class="comment">//准备state对象---保存具体的数据</span></span><br><span class="line"><span class="keyword">const</span> state = &#123;&#125;</span><br><span class="line"><span class="comment">//创建并暴露store</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="keyword">new</span> <span class="title class_">Vuex</span>.<span class="title class_">Store</span>(&#123;</span><br><span class="line">	action = action,</span><br><span class="line">	mutations = mutations,</span><br><span class="line">	state = state,</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p>​	2.在<code>main.js</code>中创建vm时传入store配置项</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">...</span><br><span class="line"><span class="keyword">import</span> store <span class="keyword">from</span> <span class="string">&#x27;./store&#x27;</span></span><br><span class="line">...</span><br><span class="line"></span><br><span class="line"><span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span><br><span class="line">	<span class="attr">el</span>:<span class="string">&#x27;#app&#x27;</span>,</span><br><span class="line">    <span class="attr">render</span>:<span class="function"><span class="params">h</span> =&gt;</span> <span class="title function_">h</span>(<span class="title class_">App</span>),</span><br><span class="line">    store,</span><br><span class="line">   </span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<h4 id="基本用法"><a href="#基本用法" class="headerlink" title="基本用法"></a>基本用法</h4><p>​	1.初始化数据，配置<code>action</code>、配置<code>mutation</code>、操作文件<code>index.js</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//引入Vue核心库</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">Vue</span> <span class="keyword">from</span> <span class="string">&#x27;Vue&#x27;</span></span><br><span class="line"><span class="comment">//引入Vuex</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">Vuex</span> <span class="keyword">from</span> <span class="string">&#x27;Vuex&#x27;</span></span><br><span class="line"><span class="comment">//应用Vuex插件</span></span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">Vuex</span>)</span><br><span class="line"><span class="comment">//准备action对象---响应组件中用户发动作</span></span><br><span class="line"><span class="keyword">const</span> action = &#123;</span><br><span class="line">    <span class="comment">//响应组件中的动作</span></span><br><span class="line">    <span class="title function_">jia</span>(<span class="params">context,value</span>)&#123;</span><br><span class="line">        context.<span class="title function_">commit</span>(<span class="string">&#x27;JIA&#x27;</span>,<span class="string">&#x27;value&#x27;</span>) </span><br><span class="line">    &#125;,</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//准备mutation对象---修改state中的数据</span></span><br><span class="line"><span class="keyword">const</span> mutation = &#123;</span><br><span class="line">    <span class="comment">//执行加</span></span><br><span class="line">    <span class="title function_">JIA</span>(<span class="params">state,value</span>)&#123;</span><br><span class="line">        state.<span class="property">sum</span> += value</span><br><span class="line">    &#125;</span><br><span class="line">&#125; </span><br><span class="line"><span class="comment">//准备state对象---保存具体的数据</span></span><br><span class="line"><span class="keyword">const</span> state = &#123;</span><br><span class="line">    <span class="comment">//初始化数据</span></span><br><span class="line">    <span class="attr">sum</span>:<span class="number">0</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//创建并暴露store</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="keyword">new</span> <span class="title class_">Vuex</span>.<span class="title class_">Store</span>(&#123;</span><br><span class="line">	action = action,</span><br><span class="line">	mutations = mutations,</span><br><span class="line">	state = state,</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p>​	2.组件中读取vuex中的数据：<code>$store.state.sum</code></p>
<p>​	3.组件中修改vuex中的数据：<code>$store.dispatch(&#39;action中的方法名&#39;,数据)</code>或者 <code>$store.commit(&#39;mutation中方法名&#39;,数据)</code></p>
<blockquote>
<p>备注：若没有网络请求或者其他业务逻辑，组件中也可以越过actions，即不写<code>dispatch</code>，直接编写<code>commit</code></p>
</blockquote>
<h3 id="四个Map方法的使用："><a href="#四个Map方法的使用：" class="headerlink" title="四个Map方法的使用："></a>四个Map方法的使用：</h3><p>​	1<code>.mapState</code>方法：用于帮助我们映射 <code>state</code> 中的数据为计算属性</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">computer</span>:&#123;</span><br><span class="line">	<span class="comment">//借助mapState生成计算属性，sum、school、subject(对象写法)</span></span><br><span class="line">	...<span class="title function_">mapState</span>(&#123;<span class="attr">sum</span>:<span class="string">&#x27;sum&#x27;</span>,<span class="attr">school</span>:<span class="string">&#x27;school&#x27;</span>,<span class="attr">subject</span>:<span class="string">&#x27;subject&#x27;</span>&#125;)</span><br><span class="line">	</span><br><span class="line">	</span><br><span class="line">	<span class="comment">//借助mapState生成计算属性，sum、school、subject(数组写法)</span></span><br><span class="line">	...<span class="title function_">mapState</span>([<span class="string">&#x27;sum&#x27;</span>,<span class="string">&#x27;school&#x27;</span>,<span class="string">&#x27;subject&#x27;</span>])</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>​	2.<code>mapGetters</code>方法：用于帮助我们映射<code>getter</code>中的数据为计算属性</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">computer</span>:&#123;</span><br><span class="line">	<span class="comment">//借助mapGetters生成计算属性，bigSum(对象写法)</span></span><br><span class="line">	...<span class="title function_">mapGetters</span>(&#123;<span class="attr">bigSum</span>:<span class="string">&#x27;bigSum&#x27;</span>,&#125;)</span><br><span class="line">	</span><br><span class="line">	</span><br><span class="line">	<span class="comment">//借助mapState生成计算属性bigSum(数组写法)</span></span><br><span class="line">	...<span class="title function_">mapGetters</span>([bigSum])</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>​	3.<code>mapActions</code>方法：用于帮助我们生成与 <code>actions</code>对话的方法，即：包含 <code>$store.dispath(xxx)</code>的函数</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">methods</span>:&#123;</span><br><span class="line">	<span class="comment">//靠mapActions生成：incrementOdd、incrementWait(对象形式)</span></span><br><span class="line">	...<span class="title function_">mapActions</span>(&#123;<span class="attr">incrementOdd</span>:<span class="string">&#x27;jiaOdd&#x27;</span>,<span class="attr">incrementWait</span>:<span class="string">&#x27;jiaWait&#x27;</span>&#125;)</span><br><span class="line">	<span class="comment">//靠mapActions生成：jiatOdd、jiatWait(数组形式)</span></span><br><span class="line">	...<span class="title function_">mapActions</span>([<span class="string">&#x27;jiaOdd&#x27;</span>,<span class="string">&#x27;jiaWait&#x27;</span>])</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>​	4.<code>mapMutations</code>方法：用于帮助我们生成与 <code>mutations</code>对话的方法，即：<code>$store.commit(xxx)</code>的函数</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">methods:&#123;</span><br><span class="line">	//靠mapMustations生成：increment、decremment(对象形式)</span><br><span class="line">	...mapActions(&#123;increment:&#x27;JIA&#x27;,decremment:&#x27;JIAN&#x27;&#125;)</span><br><span class="line">	//靠mapMutations生成：JIA、JIAN(数组形式)</span><br><span class="line">	...mapActions([&#x27;JIA&#x27;,&#x27;JIAN&#x27;])</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>备注：<code>mapActions</code>与<code>mapMutations</code>使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象</p>
</blockquote>
<h3 id="模块化-命名空间"><a href="#模块化-命名空间" class="headerlink" title="模块化+命名空间"></a>模块化+命名空间</h3><p>​	1.<strong>目的：</strong>让代码更好的维护，让多种数据分类更加明确</p>
<p>​	2.修改 <code>store.js</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> countAbout = &#123;</span><br><span class="line">	<span class="attr">namespaced</span>:<span class="literal">true</span>, <span class="comment">//开启命名空间</span></span><br><span class="line">	<span class="attr">actions</span>:&#123;...&#125;,</span><br><span class="line">	<span class="attr">mutations</span>:&#123;...&#125;,</span><br><span class="line">	<span class="attr">state</span>:&#123;...&#125;,</span><br><span class="line">	<span class="attr">getters</span>:&#123;</span><br><span class="line">		<span class="title function_">bigSum</span>(<span class="params">state</span>)&#123;</span><br><span class="line">		<span class="keyword">return</span> state.<span class="property">sum</span> *= <span class="number">10</span></span><br><span class="line">		&#125;	</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> personAbout = &#123;</span><br><span class="line">	<span class="attr">namespaced</span>:<span class="literal">true</span>, <span class="comment">//开启命名空间</span></span><br><span class="line">	<span class="attr">actions</span>:&#123;...&#125;,</span><br><span class="line">	<span class="attr">mutations</span>:&#123;...&#125;,</span><br><span class="line">	<span class="attr">state</span>:&#123;...&#125;,</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> store = <span class="keyword">new</span> <span class="title class_">Vuex</span>.<span class="title class_">Store</span>(&#123;</span><br><span class="line">	<span class="attr">modules</span>:&#123;</span><br><span class="line">	countAbout,</span><br><span class="line">	personAbout</span><br><span class="line">	&#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>​	3.开启命名空间后，组件中读取state数据：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//方式一 : 自己直接读取</span></span><br><span class="line"><span class="variable language_">this</span>.<span class="property">$store</span>.<span class="property">state</span>.<span class="property">personAbout</span>.<span class="property">list</span></span><br><span class="line"><span class="comment">//方式二 : 借助mapState读取</span></span><br><span class="line">...<span class="title function_">mapState</span>(<span class="string">&#x27;countAbout&#x27;</span>,[<span class="string">&#x27;sum&#x27;</span>,<span class="string">&#x27;school&#x27;</span>,<span class="string">&#x27;subject&#x27;</span>])</span><br></pre></td></tr></table></figure>

<p>​	4.开启命名空间后，组件中读取getters数据：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//方式一 : 自己直接读取</span></span><br><span class="line"><span class="variable language_">this</span>.<span class="property">$store</span>.<span class="property">getters</span>[personAbout/firstPersonName<span class="string">&#x27;]</span></span><br><span class="line"><span class="string">//方式二 : 借助mapGetters读取</span></span><br><span class="line"><span class="string">...mapGetters(&#x27;</span>countAbout<span class="string">&#x27;,[&#x27;</span>bigSum<span class="string">&#x27;])</span></span><br></pre></td></tr></table></figure>

<p>​	5.开启命名空间后，组件中调用dispatch</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//方式一: 自己直接dispatch</span></span><br><span class="line"><span class="variable language_">this</span>.<span class="property">$store</span>.<span class="title function_">dispatch</span>(<span class="string">&#x27;personAbout/addPersonWang&#x27;</span>,person)</span><br><span class="line"><span class="comment">//方式二: 借助mapActions</span></span><br><span class="line">...<span class="title function_">mapActions</span>(<span class="string">&#x27;countAbout&#x27;</span>,&#123;<span class="attr">incremmentOdd</span>:<span class="string">&#x27;jiaOdd&#x27;</span>,<span class="attr">incremmentWait</span>:<span class="string">&#x27;jiaWait&#x27;</span>&#125;)</span><br></pre></td></tr></table></figure>

<p>​	6.开启命名空间后，组件中调用commit</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//方式一: 自己直接commit</span></span><br><span class="line"><span class="variable language_">this</span>.<span class="property">$store</span>.<span class="title function_">commit</span>(<span class="string">&#x27;personAbout/ADD_PERSON&#x27;</span>,person)</span><br><span class="line"><span class="comment">//方式二: 借助mapActions</span></span><br><span class="line">...<span class="title function_">mapMutations</span>(<span class="string">&#x27;countAbout&#x27;</span>,&#123;<span class="attr">incremment</span>:<span class="string">&#x27;JIA&#x27;</span>,<span class="attr">decremment</span>:<span class="string">&#x27;JIAN&#x27;</span>&#125;)</span><br></pre></td></tr></table></figure>

<h3 id="vue-router的理解"><a href="#vue-router的理解" class="headerlink" title="vue-router的理解"></a>vue-router的理解</h3><ul>
<li><p><strong>理解：</strong>vue的一个插件库，专门用来实现<code>SPA应用</code></p>
</li>
<li><p><strong>对SPA应用的理解</strong></p>
<ul>
<li><p>单页面Web应用（single page web application ,SPA）</p>
</li>
<li><p>整个应用只有一个完整的页面</p>
</li>
<li><p>点击页面中的导航链接不会刷新页面，只会做页面的局部更新</p>
</li>
<li><p>数据需要通过ajax请求获取</p>
</li>
</ul>
</li>
</ul>
<h3 id="路由的理解"><a href="#路由的理解" class="headerlink" title="路由的理解"></a>路由的理解</h3><ul>
<li><strong>什么是路由？</strong></li>
</ul>
<p>​		1.一个路由就是一组映射关系(key - value)</p>
<p>​		2.key为路径，value可能是function或component</p>
<ul>
<li><strong>路由分类</strong></li>
</ul>
<p>​		<em>1.前端路由：</em></p>
<p>​			1、理解：value是function，用于处理客户端提交的请求</p>
<p>​			2、工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据</p>
<p>​		<em>2.后端路由：</em></p>
<p>​			1、理解：value是component，用于展示页面内容</p>
<p>​			2、工作过程：当浏览器的路径改变时，对应的组件就会显示</p>
<h4 id="基本使用："><a href="#基本使用：" class="headerlink" title="基本使用："></a>基本使用：</h4><p>​	1.安装vue-router，命令：<code>npm i vue-router</code></p>
<p>​	2.应用插件：<code>Vue.ues(VueRouter)</code></p>
<p>​	3.编写配置项：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//引入VueRouter</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">VueRouter</span> <span class="keyword">from</span> <span class="string">&#x27;vue-router&#x27;</span></span><br><span class="line"><span class="comment">//引入路由组件</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">About</span> <span class="keyword">from</span> <span class="string">&#x27;../components/About&#x27;</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">Home</span> <span class="keyword">from</span> <span class="string">&#x27;../components/Home&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//创建router实例对象，去管理一组一组的路由规则</span></span><br><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> <span class="title class_">VueRouter</span>(&#123;</span><br><span class="line">	<span class="attr">routes</span>:[</span><br><span class="line">	&#123;</span><br><span class="line">		<span class="attr">path</span>:<span class="string">&#x27;/about&#x27;</span>,</span><br><span class="line">		<span class="attr">component</span>:<span class="title class_">About</span></span><br><span class="line">	&#125;,</span><br><span class="line">	&#123;</span><br><span class="line">		<span class="attr">path</span>:<span class="string">&#x27;/home&#x27;</span>,</span><br><span class="line">		<span class="attr">component</span>:<span class="title class_">Home</span>,</span><br><span class="line">       <span class="attr">children</span>:[</span><br><span class="line">         &#123;</span><br><span class="line">           <span class="attr">path</span>: <span class="string">&#x27;news&#x27;</span></span><br><span class="line">           <span class="attr">component</span>:<span class="title class_">News</span>,</span><br><span class="line">         &#125;</span><br><span class="line">       ]</span><br><span class="line">	&#125;,</span><br><span class="line">        </span><br><span class="line">	]</span><br><span class="line"></span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">//暴露router</span></span><br><span class="line"><span class="keyword">export</span> defalt router</span><br></pre></td></tr></table></figure>

<p>​	4.实现切换(active-class可配置高亮选项)</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;router-link active-<span class="keyword">class</span> = <span class="string">&quot;active&quot;</span> to = <span class="string">&quot;/about&quot;</span>&gt;<span class="title class_">About</span>&lt;/router-link&gt;</span><br></pre></td></tr></table></figure>

<p>​	5.指定展示位置</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;router-view&gt;&lt;/router-view&gt;</span><br></pre></td></tr></table></figure>

<h4 id="多级路由-嵌套路由"><a href="#多级路由-嵌套路由" class="headerlink" title="多级路由(嵌套路由)"></a>多级路由(嵌套路由)</h4><p>​	1.配置路由规则，使用children配置项：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">routes</span>:[</span><br><span class="line">	&#123;</span><br><span class="line">		<span class="attr">path</span>:<span class="string">&#x27;/about&#x27;</span>,</span><br><span class="line">		<span class="attr">component</span>:<span class="title class_">About</span></span><br><span class="line">	&#125;,</span><br><span class="line">	&#123;</span><br><span class="line">		<span class="attr">path</span>:<span class="string">&#x27;/home&#x27;</span>,</span><br><span class="line">		<span class="attr">component</span>:<span class="title class_">Home</span>,</span><br><span class="line">       <span class="attr">children</span>:[	<span class="comment">//通过children配置子级路由</span></span><br><span class="line">         &#123;</span><br><span class="line">           <span class="attr">path</span>: <span class="string">&#x27;news&#x27;</span> <span class="comment">//此处不一定要写 /news</span></span><br><span class="line">           <span class="attr">component</span>:<span class="title class_">News</span></span><br><span class="line">         &#125;,</span><br><span class="line">         &#123;</span><br><span class="line">         	<span class="attr">path</span>:<span class="string">&#x27;message&#x27;</span> <span class="comment">//此处不一定要写 /message</span></span><br><span class="line">         	<span class="attr">component</span>:<span class="title class_">Message</span></span><br><span class="line">         &#125;</span><br><span class="line">       ]</span><br><span class="line">	&#125;,</span><br><span class="line">        </span><br><span class="line">	]</span><br></pre></td></tr></table></figure>

<p>​	2.跳转（要写完整路径）</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;router-link to = <span class="string">&quot;/home/news&quot;</span>&gt;<span class="title class_">News</span>&lt;/router-link&gt;</span><br></pre></td></tr></table></figure>

<h4 id="路由的query参数"><a href="#路由的query参数" class="headerlink" title="路由的query参数"></a>路由的query参数</h4><p>​	1.传递参数(<code>:to=“xxxx”</code>)</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&lt;!--跳转并携带query参数，to的字符串写法--&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">router-link</span> <span class="attr">:to</span>=<span class="string">&quot;`/home/message/detail?id=666&amp;title=你好`&quot;</span>&gt;</span>跳转<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span></span><br><span class="line"><span class="comment">//要使用模块语法，使用``包裹起来</span></span><br><span class="line"></span><br><span class="line">&lt;!--跳转并携带query参数，to的写法--&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">router-link</span> </span></span></span><br><span class="line"><span class="tag"><span class="language-xml"><span class="attr">:to</span>=<span class="string">&quot;&#123;</span></span></span></span><br><span class="line"><span class="string"><span class="tag"><span class="language-xml">	path:&#x27;/home/message/detail&#x27;,</span></span></span></span><br><span class="line"><span class="string"><span class="tag"><span class="language-xml">	query:&#123;</span></span></span></span><br><span class="line"><span class="string"><span class="tag"><span class="language-xml">		id:666,</span></span></span></span><br><span class="line"><span class="string"><span class="tag"><span class="language-xml">		title:你好</span></span></span></span><br><span class="line"><span class="string"><span class="tag"><span class="language-xml">	&#125;</span></span></span></span><br><span class="line"><span class="string"><span class="tag"><span class="language-xml"></span></span></span></span><br><span class="line"><span class="string"><span class="tag"><span class="language-xml">&#125;&quot;</span>&gt;</span>跳转<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span></span><br></pre></td></tr></table></figure>

<p>​	2.接收参数</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$route.<span class="property">query</span>.<span class="property">id</span></span><br><span class="line">$route.<span class="property">query</span>.<span class="property">title</span></span><br></pre></td></tr></table></figure>

<h4 id="命名路由："><a href="#命名路由：" class="headerlink" title="命名路由："></a>命名路由：</h4><p>​	1.<strong>作用</strong>：可以简化路由的跳转</p>
<p>​	2.<strong>如何使用：</strong></p>
<p>​		1.给路由命名：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">	<span class="attr">path</span>:<span class="string">&#x27;/demo&#x27;</span>,</span><br><span class="line">	<span class="attr">component</span>:<span class="title class_">Demo</span>,</span><br><span class="line">	<span class="attr">children</span>:[</span><br><span class="line">	&#123;</span><br><span class="line">		<span class="attr">path</span>:<span class="string">&#x27;test&#x27;</span>,</span><br><span class="line">		<span class="attr">component</span>:<span class="title class_">Test</span>,</span><br><span class="line">		<span class="attr">children</span>:[</span><br><span class="line">		&#123;</span><br><span class="line">			<span class="attr">name</span>:<span class="string">&#x27;hello&#x27;</span><span class="comment">//给路由命名</span></span><br><span class="line">			<span class="attr">path</span>:<span class="string">&#x27;welcome&#x27;</span>,</span><br><span class="line">			<span class="attr">commponent</span>:<span class="title class_">Hello</span>,</span><br><span class="line">			  &#125;</span><br><span class="line">		   ]</span><br><span class="line">		&#125;</span><br><span class="line">	]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>​		2.简化跳转：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">&lt;!--简化前需要写完整的路径--&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">router-link</span> <span class="attr">:to</span>=<span class="string">&quot;/demo/test/welcome&quot;</span>&gt;</span>跳转<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line">&lt;!--简化后，直接通过名字跳转--&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">router-link</span> <span class="attr">:to</span>=<span class="string">&quot;&#123;name:hello&#125;&quot;</span>&gt;</span>跳转<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line">&lt;!--简化写法配合传递参数--&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">router-link</span> </span></span></span><br><span class="line"><span class="tag"><span class="language-xml">	<span class="attr">:to</span>=<span class="string">&quot;&#123;</span></span></span></span><br><span class="line"><span class="string"><span class="tag"><span class="language-xml">		name:&#x27;hello&#x27;, //注意要使用name属性，不要使用path属性</span></span></span></span><br><span class="line"><span class="string"><span class="tag"><span class="language-xml">		query:&#123;</span></span></span></span><br><span class="line"><span class="string"><span class="tag"><span class="language-xml">		id:666,</span></span></span></span><br><span class="line"><span class="string"><span class="tag"><span class="language-xml">		title:你好</span></span></span></span><br><span class="line"><span class="string"><span class="tag"><span class="language-xml">	&#125;</span></span></span></span><br><span class="line"><span class="string"><span class="tag"><span class="language-xml"></span></span></span></span><br><span class="line"><span class="string"><span class="tag"><span class="language-xml">&#125;&quot;</span>&gt;</span>跳转<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span></span><br></pre></td></tr></table></figure>

<h4 id="路由的params参数"><a href="#路由的params参数" class="headerlink" title="路由的params参数"></a>路由的params参数</h4><p>​	1.配置路由，声明接收params参数</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">	<span class="attr">path</span>:<span class="string">&#x27;/home&#x27;</span>,</span><br><span class="line">	<span class="attr">component</span>:<span class="title class_">Home</span>,</span><br><span class="line">	<span class="attr">children</span>:[</span><br><span class="line">	&#123;</span><br><span class="line">		<span class="attr">path</span>:<span class="string">&#x27;news&#x27;</span>,</span><br><span class="line">		<span class="attr">component</span>:<span class="title class_">News</span></span><br><span class="line">		&#125;,</span><br><span class="line">		&#123;</span><br><span class="line">			<span class="attr">path</span>:<span class="string">&#x27;message&#x27;</span></span><br><span class="line">			<span class="attr">component</span>:<span class="title class_">Message</span>,</span><br><span class="line">			<span class="attr">children</span>:[</span><br><span class="line">		&#123;</span><br><span class="line">			<span class="attr">name</span>:<span class="string">&#x27;xiangqing&#x27;</span> <span class="comment">//给路由命名</span></span><br><span class="line">			<span class="attr">path</span>:<span class="string">&#x27;detail/:id/:title&#x27;</span>, <span class="comment">//使用占位符声明接收params参数</span></span><br><span class="line">			<span class="attr">commponent</span>:<span class="title class_">Detail</span>,</span><br><span class="line">			  &#125;</span><br><span class="line">		   ]</span><br><span class="line">		&#125;</span><br><span class="line">	]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>​	2.传递参数</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&lt;!--跳转并携带query参数，to的字符串写法--&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">router-link</span> <span class="attr">:to</span>=<span class="string">&quot;`/home/message/detail/666/你好`&quot;</span>&gt;</span>跳转<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span></span><br><span class="line"><span class="comment">//要使用模块语法，使用``包裹起来</span></span><br><span class="line"></span><br><span class="line">&lt;!--跳转并携带query参数，to的写法--&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">router-link</span> </span></span></span><br><span class="line"><span class="tag"><span class="language-xml"><span class="attr">:to</span>=<span class="string">&quot;&#123;</span></span></span></span><br><span class="line"><span class="string"><span class="tag"><span class="language-xml">	name:&#x27;xiangqing&#x27;,//注意要使用name属性，不要使用path属性</span></span></span></span><br><span class="line"><span class="string"><span class="tag"><span class="language-xml">	params:&#123;</span></span></span></span><br><span class="line"><span class="string"><span class="tag"><span class="language-xml">		id:666,</span></span></span></span><br><span class="line"><span class="string"><span class="tag"><span class="language-xml">		title:你好</span></span></span></span><br><span class="line"><span class="string"><span class="tag"><span class="language-xml">	&#125;</span></span></span></span><br><span class="line"><span class="string"><span class="tag"><span class="language-xml"></span></span></span></span><br><span class="line"><span class="string"><span class="tag"><span class="language-xml">&#125;&quot;</span>&gt;</span>跳转<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span></span><br></pre></td></tr></table></figure>

<blockquote>
<p>特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！！！</p>
</blockquote>
<p>​	3.接收参数</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$route.<span class="property">params</span>.<span class="property">id</span></span><br><span class="line">$route.<span class="property">params</span>.<span class="property">title</span></span><br></pre></td></tr></table></figure>

<h4 id="路由的props配置"><a href="#路由的props配置" class="headerlink" title="路由的props配置"></a>路由的props配置</h4><p>​	<strong>作用</strong>：让路由组件更方便的接收参数</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">	<span class="attr">name</span>:<span class="string">&#x27;xiangqing&#x27;</span>,</span><br><span class="line">	<span class="attr">path</span>:<span class="string">&#x27;datail/id&#x27;</span>,</span><br><span class="line">	<span class="attr">component</span>:<span class="title class_">Detail</span>,</span><br><span class="line"><span class="comment">//第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件</span></span><br><span class="line">	<span class="attr">props</span>:&#123;<span class="attr">a</span>:<span class="number">900</span>&#125;</span><br><span class="line"><span class="comment">//第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件</span></span><br><span class="line">	<span class="attr">props</span>:<span class="literal">true</span></span><br><span class="line"><span class="comment">//第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件</span></span><br><span class="line">	<span class="title function_">props</span>(<span class="params">route</span>)&#123;</span><br><span class="line">		<span class="keyword">return</span>&#123;</span><br><span class="line">			<span class="attr">id</span>:route.<span class="property">query</span>.<span class="property">id</span>,</span><br><span class="line">			<span class="attr">title</span>:route.<span class="property">query</span>.<span class="property">title</span></span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="的replace属性"><a href="#的replace属性" class="headerlink" title="的replace属性"></a><router-link>的replace属性</h3><ul>
<li><p>作用：控制路由跳转时操作浏览器历史记录的模式</p>
</li>
<li><p>浏览器的历史记录有两种写入方式：分别是<code>push</code>和<code>replace</code>，<code>push</code>是追加历史记录，<code>replace</code>是替换当前记录，路由跳转时候默认是<code>push</code></p>
</li>
<li><p>如何开启replace模式，<code>&lt;router-link replace ….&gt;News&lt;/router-link&gt;</code></p>
</li>
</ul>
<h3 id="编程式路由导航"><a href="#编程式路由导航" class="headerlink" title="编程式路由导航"></a>编程式路由导航</h3><p>​	1.<strong>作用：</strong>不借助 <code>&lt;router-link&gt;</code>实现路由跳转，让路由跳转更加灵活</p>
<p>​	2.<strong>具体编码：</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//$router的两个API</span></span><br><span class="line"><span class="variable language_">this</span>.<span class="property">$router</span>.<span class="title function_">push</span>(&#123;</span><br><span class="line">	<span class="attr">name</span>:<span class="string">&#x27;xiangqing&#x27;</span></span><br><span class="line">	<span class="attr">params</span>:&#123;</span><br><span class="line">		<span class="attr">id</span>:xxx,</span><br><span class="line">		<span class="attr">title</span>:xxx</span><br><span class="line">	&#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="variable language_">this</span>.<span class="property">$router</span>.<span class="title function_">replace</span>(&#123;</span><br><span class="line">	<span class="attr">name</span>:<span class="string">&#x27;xiangqing&#x27;</span></span><br><span class="line">	<span class="attr">params</span>:&#123;</span><br><span class="line">		<span class="attr">id</span>:xxx,</span><br><span class="line">		<span class="attr">title</span>:xxx</span><br><span class="line">	&#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="variable language_">this</span>.<span class="property">$router</span>.<span class="title function_">forward</span>() <span class="comment">//前进</span></span><br><span class="line"><span class="variable language_">this</span>.<span class="property">$router</span>.<span class="title function_">back</span>() <span class="comment">//后退</span></span><br><span class="line"><span class="variable language_">this</span>.<span class="property">$router</span>.<span class="title function_">go</span>() <span class="comment">//给定数字实现前进后退操作  </span></span><br></pre></td></tr></table></figure>

<h3 id="缓存路由"><a href="#缓存路由" class="headerlink" title="缓存路由"></a>缓存路由</h3><p>​	1.作用：让不展示的路由组件保持挂载，不被销毁</p>
<p>​	2.具体编码</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;keep-alive include = <span class="string">&quot;News&quot;</span>&gt;<span class="comment">//News指的是组件名</span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">router-view</span>&gt;</span><span class="tag">&lt;/<span class="name">router-view</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line">&lt;/keep-alive&gt;</span><br></pre></td></tr></table></figure>

<p>备注：缓存多个路由组件</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//绑定元素，并且把路由组件写进数组中</span></span><br><span class="line">&lt;keep-alive :include = <span class="string">&quot;[&#x27;News&#x27;,&#x27;Message&#x27;]&quot;</span>&gt;</span><br></pre></td></tr></table></figure>

<h3 id="两个新的生命周期钩子"><a href="#两个新的生命周期钩子" class="headerlink" title="两个新的生命周期钩子"></a>两个新的生命周期钩子</h3><ul>
<li><p><strong>作用</strong>：路由组件所独有的两个钩子，用于捕获路由组件的激活状态</p>
</li>
<li><p><strong>具体名字：</strong></p>
<ul>
<li><p><code>activated</code>路由组件被激活时触发</p>
</li>
<li><p><code>deactivated</code>路由组件失活时触发</p>
</li>
</ul>
</li>
</ul>
<h3 id="路由守卫"><a href="#路由守卫" class="headerlink" title="路由守卫"></a>路由守卫</h3><ul>
<li><p><strong>作用：</strong>对路由进行权限控制</p>
</li>
<li><p><strong>分类：</strong>全局守卫、独享守卫、组件内守卫</p>
<h4 id="全局守卫："><a href="#全局守卫：" class="headerlink" title="全局守卫："></a>全局守卫：</h4></li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//全局前置路由守卫，初始化执行，每次路由切换前执行</span></span><br><span class="line">router.<span class="title function_">beforeEach</span>(<span class="function">(<span class="params">to,<span class="keyword">from</span>,next</span>)=&gt;</span>&#123;</span><br><span class="line">	<span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;beforeEach&#x27;</span>,to,<span class="keyword">from</span>)</span><br><span class="line">	<span class="keyword">if</span>(to.<span class="property">meta</span>.<span class="property">isAuth</span>)&#123;	<span class="comment">//判断当前路由是否需要进行权限控制</span></span><br><span class="line">	   <span class="keyword">if</span>(<span class="variable language_">localStorage</span>.<span class="title function_">getItem</span>(<span class="string">&#x27;school&#x27;</span>)===<span class="string">&#x27;atguigu&#x27;</span>)&#123; <span class="comment">//权限控制的具体规则</span></span><br><span class="line">	   	  <span class="title function_">next</span>()<span class="comment">//放行</span></span><br><span class="line">	&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">		<span class="title function_">alert</span>(<span class="string">&#x27;暂无权限查看&#x27;</span>)</span><br><span class="line">	&#125;</span><br><span class="line">  &#125;<span class="title function_">else</span>(<span class="params"></span>)&#123;</span><br><span class="line">  	<span class="title function_">next</span>() <span class="comment">//放行</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">//全局后置路由守卫，初始化时执行，每次路由切换后执行</span></span><br><span class="line">router.<span class="title function_">afterEach</span>(<span class="function">(<span class="params">to,<span class="keyword">from</span></span>)=&gt;</span>&#123;</span><br><span class="line">	<span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;afterEach&#x27;</span>,to,<span class="keyword">from</span>)</span><br><span class="line">	<span class="keyword">if</span>(to.<span class="property">meta</span>.<span class="property">title</span>)&#123;</span><br><span class="line">		<span class="variable language_">document</span>.<span class="property">title</span> = to.<span class="property">mteta</span>.<span class="property">title</span><span class="comment">//修改网页的title</span></span><br><span class="line">	&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">	<span class="variable language_">document</span>.<span class="property">title</span> = <span class="string">&#x27;vue_test&#x27;</span></span><br><span class="line">	&#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<h4 id="独享守卫："><a href="#独享守卫：" class="headerlink" title="独享守卫："></a>独享守卫：</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">beforeEnter</span>((to,<span class="keyword">from</span>,next)&#123;</span><br><span class="line">	<span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;beforeEnter&#x27;</span>,to,<span class="keyword">from</span>)</span><br><span class="line">	<span class="keyword">if</span>(to.<span class="property">meta</span>.<span class="property">isAuth</span>)&#123;	<span class="comment">//判断当前路由是否需要进行权限控制</span></span><br><span class="line">	   <span class="keyword">if</span>(<span class="variable language_">localStorage</span>.<span class="title function_">getItem</span>(<span class="string">&#x27;school&#x27;</span>)===<span class="string">&#x27;atguigu&#x27;</span>)&#123; <span class="comment">//权限控制的具体规则</span></span><br><span class="line">	   	  <span class="title function_">next</span>()<span class="comment">//放行</span></span><br><span class="line">	&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">		<span class="title function_">alert</span>(<span class="string">&#x27;暂无权限查看&#x27;</span>)</span><br><span class="line">	&#125;</span><br><span class="line">  &#125;<span class="title function_">else</span>(<span class="params"></span>)&#123;</span><br><span class="line">  	<span class="title function_">next</span>() <span class="comment">//放行</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<h4 id="组件内守卫："><a href="#组件内守卫：" class="headerlink" title="组件内守卫："></a>组件内守卫：</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//	进入守卫，通过路由规则，进入该组件时调用</span></span><br><span class="line"><span class="title function_">beforeRouterEnter</span>(<span class="params">to,<span class="keyword">from</span>,next</span>)&#123;</span><br><span class="line"></span><br><span class="line">&#125;,</span><br><span class="line"><span class="title function_">beforeRouteLeave</span>(<span class="params">to,<span class="keyword">from</span>,next</span>)&#123;</span><br><span class="line"><span class="comment">// 离开守卫，通过路由规则，离开该组件时被调用</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="路由器的两种工作模式"><a href="#路由器的两种工作模式" class="headerlink" title="路由器的两种工作模式"></a>路由器的两种工作模式</h3><ul>
<li><p>对于一个url来说，什么是hash值？———#及其后面的内容就是hash值</p>
</li>
<li><p>hash值不会包含在HTTP请求中，即：hash值不会带给服务器</p>
</li>
<li><p><strong>hash模式：</strong></p>
<ul>
<li><p>地址中永远带着#号，不美观</p>
</li>
<li><p>若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合格</p>
</li>
<li><p>兼容性较好</p>
</li>
</ul>
</li>
<li><p><strong>history模式：</strong></p>
<ul>
<li><p>地址干净，美观</p>
</li>
<li><p>兼容性和hash模式相比略差</p>
</li>
<li><p>应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题</p>
</li>
</ul>
</li>
</ul>
<h3 id="拉开序幕的setup"><a href="#拉开序幕的setup" class="headerlink" title="拉开序幕的setup"></a>拉开序幕的setup</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">1. 理解：Vue3中一个新的配置项，值为一个函数</span><br><span class="line">1. setup是所有`Composition API(组合式API)` “表演的舞台”</span><br></pre></td></tr></table></figure>

<ol start="3">
<li><p>组件中所用到的：数据、方法、等等，均要配置在setup中</p>
</li>
<li><p><code>lintOnSave:false</code>关闭语法检查</p>
</li>
<li><p>setup函数的两种返回值：</p>
<p>​	1.若返回一个对象，则对象中的属性、方法，在模板中均可以直接使用（重点关注！）</p>
<p>​	2.若返回一个渲染函数，则可以自定义渲染内容（了解）</p>
</li>
</ol>
<p>​	5.注意点：</p>
<ol>
<li><p>尽量不要与vue2配置混用 </p>
</li>
<li><p>setup不能是一个<code>async</code>函数，因为返回值不再是return的对象，而是promise，模板看不到return对象中的属性</p>
<ul>
<li><p>Vue2.x配置(data、method、computed….)中可以访问到setup中的属性和方法</p>
</li>
<li><p>但在setup中不能访问到Vue.x配置(data、method。computed….)</p>
</li>
<li><p>如果有重名，setup优先</p>
</li>
</ul>
</li>
</ol>
<h3 id="ref函数"><a href="#ref函数" class="headerlink" title="ref函数"></a>ref函数</h3><ul>
<li><p>作用：定义一个响应式的数据</p>
</li>
<li><p>语法：<code>const xxx = ref(initValue) </code></p>
<ul>
<li>创建一个包含响应式数据的<code>引用对象(reference对象</code>)</li>
<li>JS中操作数据：<code>xxx.value</code></li>
<li>模板中读取数据：不需要.value，直接：<code>&lt;div&gt;&#123;&#123;xxx&#125;&#125;&lt;/div&gt;</code></li>
</ul>
</li>
<li><p>备注：</p>
<ul>
<li>接收的数据可以是：基本类型、也可以是对象类型</li>
<li>基本类型的数据：响应式依然是靠<code>Object.defineProperty()</code>的<code>get</code>与<code>set</code>完成的</li>
<li>对象类型的数据：内部“求助”了Vue3中的一个新函数——<code>reactive</code>函数</li>
</ul>
</li>
</ul>
<h3 id="reactive函数"><a href="#reactive函数" class="headerlink" title="reactive函数"></a>reactive函数</h3><ul>
<li>作用：定义一个对象类型的响应式数据(基本类型不要用它，要用<code>ref</code>函数)</li>
<li>语法：<code>const  代理对象 =  reactive(源对象)</code>接收一个对象(或数组)，返回一个<code>代理对象(proxy对象)</code></li>
<li>reactive定义的响应式数据是<code>&quot;深层次的&quot;</code></li>
<li>内部基于<code>ES6</code>的<code>Proxy</code>实现，通过代理对象操作源对象内部数据进行操作</li>
</ul>
<h3 id="Vue3中的响应式原理"><a href="#Vue3中的响应式原理" class="headerlink" title="Vue3中的响应式原理"></a>Vue3中的响应式原理</h3><h4 id="vue2的响应式"><a href="#vue2的响应式" class="headerlink" title="vue2的响应式"></a>vue2的响应式</h4><ul>
<li><p>实现原理：</p>
<ul>
<li><p>对象类型：通过<code>Object.defineProperty()</code>对属性的读取、修改进行拦截(数据劫持)</p>
</li>
<li><p>数组类型：通过重写更新数组的一系列方法来实现拦截(对数组的变更方法进行了包裹)</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="title class_">Object</span>.<span class="title function_">defineProperty</span>(data,<span class="string">&#x27;count&#x27;</span>,&#123;</span><br><span class="line">	<span class="title function_">get</span>(<span class="params"></span>)&#123;...&#125;</span><br><span class="line">	<span class="title function_">set</span>(<span class="params"></span>)&#123;...&#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure></li>
</ul>
</li>
<li><p>存在问题：</p>
<ul>
<li>新增属性、删除属性、界面不会更新</li>
<li>直接通过下标修改数组，界面不会自动更新</li>
</ul>
</li>
</ul>
<h4 id="Vue3的响应式"><a href="#Vue3的响应式" class="headerlink" title="Vue3的响应式"></a>Vue3的响应式</h4><ul>
<li><p>实现原理：</p>
<ul>
<li><p>通过Proxy(代理)：拦截对象中任意属性的变化，包括：属性值的读写、属性的添加、属性的删除</p>
</li>
<li><p>通过Reflect(反射)：对被代理对象的属性进行操作</p>
</li>
<li><pre><code class="js">new Proxy(data,&#123;
    //拦截读取属性
    get(target,prop)&#123;
        return Reflect.get(target,prop)
    &#125;
    //拦截设置属性值或添加新属性
    set(target,prop,value)&#123;
        return Reflect.set(targer,prop,value)
    &#125;
    //拦截删除属性
    deleteProprety(target,prop)&#123;
        return Reflect.deleteProperty(target,prop)
    &#125;

&#125;)

proxy.name = &#39;tom&#39;
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">    </span><br><span class="line"></span><br><span class="line">###  reactive对比ref</span><br><span class="line"></span><br><span class="line">- 从定义数据角度对比：</span><br><span class="line">  - ref用来定义：基本数据类型</span><br><span class="line">  - reactive用来定义：对象(或数组)类型数据</span><br><span class="line">  - 备注：ref也可以用来定义对象(或数组)类型数据，它内部会自动通过`reactive`转为代理对象</span><br><span class="line">- 从原理角度对比：</span><br><span class="line">  - ref通过`Object.defineProprety()`的`get`与`set`来实现响应式(数据劫持)</span><br><span class="line">  - reactive通过使用`Proxy`来实现响应式(数据劫持)，并通过Reflect操作源对象内部的数据</span><br><span class="line">- 从使用角度对比：</span><br><span class="line">  - ref定义的数据：操作数据需要`.value`，读取数据时模板中直接读取不需要`.value`</span><br><span class="line">  - reactive定义的数据：操作数据与读取数据：均不需要`.value`</span><br><span class="line"></span><br><span class="line">###  setup的两个注意点</span><br><span class="line"></span><br><span class="line">- setup执行的时机</span><br><span class="line">  - 在beforeCreate之前执行一次，this是`undefined`</span><br><span class="line">- setup的参数</span><br><span class="line">  - props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性</span><br><span class="line">  - context：上下文对象</span><br><span class="line">    - attrs：值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性，相当于`this.$attrs`</span><br><span class="line">    - slots：收到的插槽内容，相当于`this.$slots`</span><br><span class="line">    - emit：分发自定义事件的函数，相当于`this.$emit`</span><br><span class="line"></span><br><span class="line">###  计算属性与监视</span><br><span class="line"></span><br><span class="line">#### 1. computed函数</span><br><span class="line"></span><br><span class="line">- 与Vue2中computed配置功能一致</span><br><span class="line"></span><br><span class="line">- 写法：</span><br><span class="line"></span><br><span class="line">  ```js</span><br><span class="line">  import &#123;computed&#125; from &#x27;vue&#x27;</span><br><span class="line">  </span><br><span class="line">  setup()&#123;</span><br><span class="line">  ...</span><br><span class="line">  //简写形式</span><br><span class="line">  	let fullName = computed(()=&gt;&#123;</span><br><span class="line">  		return person.firstName + &#x27;-&#x27; +person.lastName</span><br><span class="line">  	&#125;)</span><br><span class="line">  //完整形式 </span><br><span class="line">  	let fullName = computed(&#123;</span><br><span class="line">  		get()&#123;</span><br><span class="line">  			return person.firstName + &#x27;-&#x27; +person.lastName</span><br><span class="line">  		&#125;,</span><br><span class="line">  		set(value)&#123;</span><br><span class="line">  			const nameArr = value.splist(&#x27;-&#x27;)</span><br><span class="line">  			person.firstName = nameArr[0]</span><br><span class="line">  			person.lastName = nameArr[1]</span><br><span class="line">  		&#125;</span><br><span class="line">  	&#125;)</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>
</code></pre>
</li>
</ul>
</li>
</ul>
<h4 id="2-watch函数"><a href="#2-watch函数" class="headerlink" title="2.watch函数"></a>2.watch函数</h4><ul>
<li><p>与Vue2中的watch配置功能一致</p>
</li>
<li><p>两个小坑：</p>
<ul>
<li>监视reactive定义的响应式数据时：oldValue无法正确获取、强制开启了深度监视(deep配置失效)</li>
<li>监视reactive定义的响应式数据中某个属性时：deep配置有效</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//情况一:监视ref定义的响应式数据</span></span><br><span class="line"><span class="title function_">watch</span>(sum,<span class="function">(<span class="params">newValue,oldValue</span>)=&gt;</span>&#123;</span><br><span class="line">	<span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;sum变化了&#x27;</span>，newValue,oldValue)</span><br><span class="line">&#125;,&#123;<span class="attr">immediate</span>:<span class="literal">true</span>&#125;)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">//情况二:监视多个ref定义的响应式数据</span></span><br><span class="line"><span class="title function_">watch</span>([sum,msg](newValue,oldValue)=&gt;&#123;</span><br><span class="line">	<span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;sum变化了&#x27;</span>，newValue,oldValue)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">//情况三:监视reactive定义的响应式数据</span></span><br><span class="line">	若watch监视的是reactive定义的响应式数据，则无法正确获得oldValue</span><br><span class="line">	若watch监视的是reactive定义的响应式数据，则强制开启的深度监视</span><br><span class="line"><span class="title function_">watch</span>(person,<span class="function">(<span class="params">newValue,oldValue</span>)=&gt;</span>&#123;</span><br><span class="line">	<span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;person变化了&#x27;</span>，newValue,oldValue)</span><br><span class="line">&#125;,&#123;<span class="attr">immediate</span>:<span class="literal">true</span>,<span class="attr">deep</span>:flase&#125;) <span class="comment">//此处的deep配置不再奏效</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">//情况四:监视reactive定义的响应式数据中的某一个属性</span></span><br><span class="line"><span class="title function_">watch</span>(<span class="function">()=&gt;</span>person.<span class="property">job</span>,<span class="function">(<span class="params">newValue,oldValue</span>)=&gt;</span>&#123;</span><br><span class="line">	<span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;person的job变化了&#x27;</span>，newValue,oldValue)</span><br><span class="line">&#125;,&#123;<span class="attr">immediate</span>:<span class="literal">true</span>,<span class="attr">deep</span>:<span class="literal">true</span>&#125;)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">//情况五:监视reactive所定义的一个响应式数据中的某些属性</span></span><br><span class="line"><span class="title function_">watch</span>([<span class="function">()=&gt;</span>person.<span class="property">name</span>,<span class="function">()=&gt;</span>person.<span class="property">age</span>],<span class="function">(<span class="params">newValue,oldValue</span>)=&gt;</span>&#123;</span><br><span class="line">	<span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;person的name或age变化了&#x27;</span>，newValue,oldValue)</span><br><span class="line">&#125;,&#123;<span class="attr">immediate</span>:<span class="literal">true</span>,<span class="attr">deep</span>:<span class="literal">true</span>&#125;)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">//特殊情况</span></span><br><span class="line"><span class="title function_">watch</span>(<span class="function">()=&gt;</span>person.<span class="property">job</span>,<span class="function">(<span class="params">newValue,oldValue</span>)=&gt;</span>&#123;</span><br><span class="line">	<span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;person的job变化了&#x27;</span>，newValue,oldValue)</span><br><span class="line">&#125;,&#123;<span class="attr">deep</span>:<span class="literal">true</span>&#125;)<span class="comment">//此处由于监视是reactive所定义的对象中的某些属性，所以deep配置有效</span></span><br></pre></td></tr></table></figure></li>
</ul>
<h4 id="watchEfffect函数"><a href="#watchEfffect函数" class="headerlink" title="watchEfffect函数"></a>watchEfffect函数</h4><ul>
<li>watch的套路是：既要指明监视的属性，也要指明监视的回调</li>
<li>watchEffect的套路是：不用指明监视那个属性，监视的回调中用到那个属性，那就监视那个属性</li>
<li>watchEffect有点像computed:<ul>
<li>但computed注重的计算出来的值(回调函数的返回值)，所以必须要写返回值</li>
<li>而watchEffect更注重的是过程(回调函数的函数体)，所以不用写返回值</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//watchEffect所指向的回调中用到的数据只要发生变化，则直接重新执行回调</span></span><br><span class="line"><span class="title function_">watchEffect</span>(<span class="function">()=&gt;</span>&#123;</span><br><span class="line">	<span class="keyword">const</span> x1 = sum.<span class="property">value</span></span><br><span class="line">	<span class="keyword">const</span> x2 = person.<span class="property">age</span></span><br><span class="line">	<span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;watchEffect配置的回调执行了&#x27;</span>)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<h3 id="生命周期-1"><a href="#生命周期-1" class="headerlink" title="生命周期"></a>生命周期</h3><h3 id="自定义hook函数"><a href="#自定义hook函数" class="headerlink" title="自定义hook函数"></a>自定义hook函数</h3><ul>
<li>什么是hook？——本质是一个函数，把setup函数中使用的Composition API进行了封装</li>
<li>类似于vue2中的<code>mixin</code></li>
<li>自定义<code>hook</code>的优势，复用代码，让setup中的逻辑更清楚易懂</li>
</ul>
<h3 id="toRef"><a href="#toRef" class="headerlink" title="toRef"></a>toRef</h3><ul>
<li>作用：创建一个ref对象，其Value值指向另一个对象中的某个属性值</li>
<li>语法：<code>const  name = toRef(person,&#39;name&#39;)</code></li>
<li>应用：要将响应式对象中的某个属性单独提供给外部使用时</li>
<li>扩展：<code>toRefs</code>与<code>toRef</code>功能一致，但可以批量创建多个ref对象，语法：<code>toRefs(person)</code></li>
</ul>
<h3 id="其它Composition-API"><a href="#其它Composition-API" class="headerlink" title="其它Composition API"></a>其它Composition API</h3><h4 id="1-shallowReactive-与-shallowRef"><a href="#1-shallowReactive-与-shallowRef" class="headerlink" title="1.shallowReactive 与 shallowRef"></a>1.shallowReactive 与 shallowRef</h4><ul>
<li>shallowReactive：只处理对象最外层属性的响应式(浅响应式)</li>
<li>shallowRef：只处理基本数据类型的响应式，不进行对象的响应式处理</li>
<li>什么时候使用？<ul>
<li>如果有一个对象数据，结构比较深，但变化时只是外层属性变化 &#x3D;&#x3D;&#x3D;&#x3D;&gt;shallowReactive</li>
<li>如果有一个对象数据，后续功能不会修改该对象中的属性，而是生成新的对象来替换&#x3D;&#x3D;&#x3D;&#x3D;&gt;shallowRef</li>
</ul>
</li>
</ul>
<h4 id="2-readonly与shallowReadonly"><a href="#2-readonly与shallowReadonly" class="headerlink" title="2.readonly与shallowReadonly"></a>2.readonly与shallowReadonly</h4><ul>
<li>readonly：让一个响应式数据变为只读的(深只读)</li>
<li>shallowReadonly：让一个响应式数据变为只读的(浅只读)</li>
<li>语法：<code>person = readonly(person) </code>  </li>
<li>应用场景：不希望数据被修改时</li>
</ul>
<h4 id="3-toRaw与markRaw"><a href="#3-toRaw与markRaw" class="headerlink" title="3.toRaw与markRaw"></a>3.toRaw与markRaw</h4><ul>
<li>toRaw：<ul>
<li>作用：将一个由<code>reactive</code>生成的响应式对象转为普通对象</li>
<li>使用场景：用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面更新</li>
</ul>
</li>
<li>markRaw：<ul>
<li>作用：标记一个对象，使其永远不会成为响应式对象</li>
<li>应用场景：<ul>
<li>有些值不应该被设置为响应式的，例如复杂的第三方类库等</li>
<li>当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能</li>
</ul>
</li>
</ul>
</li>
</ul>
<h4 id="4-customRef"><a href="#4-customRef" class="headerlink" title="4.customRef"></a>4.customRef</h4><ul>
<li><p>作用：创建一个自定义的ref，并对其依赖项跟踪和更新触发进行显式控制</p>
</li>
<li><p>实现防抖效果：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">	&lt;input type = &quot;text&quot; v-model = &quot;keyword&quot;&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">	import &#123;ref,customRef&#125; from &#x27;vue&#x27;</span><br><span class="line">    export default &#123;</span><br><span class="line">        name: &#x27;Demo&#x27;,</span><br><span class="line">        setup()&#123;</span><br><span class="line">            // let keyword = ref(&#x27;hello&#x27;)</span><br><span class="line">            //自定义一个myRef</span><br><span class="line">            function myRef(value,deplay)&#123;</span><br><span class="line">                let timer</span><br><span class="line">                //通过customRef去实现自定义</span><br><span class="line">                return customRef(()=&gt;&#123;</span><br><span class="line">                    return &#123;</span><br><span class="line">                        get()&#123;</span><br><span class="line">                            track()//告诉vue这个value值是需要被追踪的</span><br><span class="line">                            return value</span><br><span class="line">                        &#125;,</span><br><span class="line">                        set(newValue)&#123;</span><br><span class="line">                            clearTimeout(timer)</span><br><span class="line">                            timer = setTimeout(()=&gt;&#123;</span><br><span class="line">                                value = newValue</span><br><span class="line">                                trigger() //告诉vue去更新界面</span><br><span class="line">                            &#125;,delay)</span><br><span class="line">                        &#125;</span><br><span class="line">                    &#125;</span><br><span class="line">                    </span><br><span class="line">                &#125;)</span><br><span class="line">            &#125;</span><br><span class="line">            let keyword = myRef(&#x27;hello&#x27;.soo) //	使用程序员自定义的ref</span><br><span class="line">              </span><br><span class="line">           </span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<h4 id="5-provide与inject"><a href="#5-provide与inject" class="headerlink" title="5.provide与inject"></a>5.provide与inject</h4><ol>
<li><p>作用：实现祖孙组件间通信</p>
</li>
<li><p>套路：父组件有一个<code>provide</code>选项来提供数据，子组件有一个<code>inject</code>选项来开始使用这些数据</p>
</li>
<li><p>具体写法：</p>
<ol>
<li><p>祖组件中</p>
<figure class="highlight js"><figcaption><span>NB</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">setup</span>(<span class="params"></span>)&#123;</span><br><span class="line">	...</span><br><span class="line">	<span class="keyword">let</span> car = <span class="title function_">reactive</span>(&#123;<span class="attr">name</span>:<span class="string">&#x27;奔驰&#x27;</span>,<span class="attr">price</span>:<span class="string">&#x27;40万&#x27;</span>&#125;)</span><br><span class="line">	<span class="title function_">provide</span>(<span class="string">&#x27;car&#x27;</span>,car)</span><br><span class="line">	...</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>孙组件中</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">setup</span>(<span class="params">props,context</span>)&#123;</span><br><span class="line">	...</span><br><span class="line">	<span class="keyword">const</span> car = <span class="title function_">inject</span>(<span class="string">&#x27;car&#x27;</span>)</span><br><span class="line">	<span class="keyword">return</span> &#123;car&#125;</span><br><span class="line">	...</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ol>
</li>
</ol>
<h4 id="6-响应式数据的判断"><a href="#6-响应式数据的判断" class="headerlink" title="6.响应式数据的判断"></a>6.响应式数据的判断</h4><ol>
<li><strong>isRef：</strong>检查一个值是否为一个ref对象</li>
<li><strong>isReactive</strong>：检查一个对象是否由<code>reactive</code>创建的响应式代理</li>
<li><strong>isReadonly：</strong>检查一个对象是否由<code>readonly</code>创建的只读代理</li>
<li><strong>isProxy：</strong>检查一个对象是否是由<code>reactive</code>或者<code>readonly</code>方法创建的代理</li>
</ol>
<h3 id="新组件"><a href="#新组件" class="headerlink" title="新组件"></a>新组件</h3><h4 id="1-Fragment"><a href="#1-Fragment" class="headerlink" title="1.Fragment"></a>1.Fragment</h4><ol>
<li>在Vue2中：组件必须有一个根标签</li>
<li>在Vue3中：组件可以没有根标签，内部会将多个标签包含在Fragment虚拟元素中</li>
<li>好处：减少标签层级，减少内存占用</li>
</ol>
<h4 id="2-Teleport"><a href="#2-Teleport" class="headerlink" title="2.Teleport"></a>2.Teleport</h4><p>​	什么是<code>Teleport</code>？——Teleport是一种能够将我们的<code>组件html结构</code>移动到指定位置的技术</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&lt;teleport to = &quot;移动位置&quot;&gt;</span><br><span class="line">	&lt;div v-if = &quot;isShow&quot; class = &quot;mask&quot;&gt;</span><br><span class="line">        &lt;div class = &quot;dialog&quot;&gt;</span><br><span class="line">            &lt;h3&gt;我是一个弹窗&lt;/h3&gt;</span><br><span class="line">            &lt;button @click = &quot;isShow = false&quot;&gt;关闭弹窗&lt;/button&gt;</span><br><span class="line">        &lt;/div&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">&lt;/teleport&gt;</span><br></pre></td></tr></table></figure>

<h4 id="3-Suspense"><a href="#3-Suspense" class="headerlink" title="3.Suspense"></a>3.Suspense</h4><ol>
<li><p>等待异步组件时渲染一些后备内容，获得更好的用户体验</p>
</li>
<li><p>等待步骤：</p>
<ol>
<li><p>异步引入组件</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123;defineAsyncComponent&#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="keyword">const</span> <span class="title class_">Child</span> = <span class="title function_">defineAsyncComponent</span>(<span class="function">()=&gt;</span><span class="keyword">import</span>(<span class="string">&#x27;./components&#x27;</span>/<span class="title class_">Child</span>.<span class="property">vue</span>))</span><br></pre></td></tr></table></figure>
</li>
<li><p>使用<code>Suspense</code>包裹组件，并且配置好<code>default</code>与<code>fallback</code></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span> = <span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">h3</span>&gt;</span>我是App组件<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">Suspense</span>&gt;</span></span><br><span class="line">    		<span class="tag">&lt;<span class="name">template</span> <span class="attr">v-slot</span> = <span class="string">default</span>&gt;</span> //骨架屏</span><br><span class="line">                <span class="tag">&lt;<span class="name">Child</span>/&gt;</span></span><br><span class="line">			<span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">template</span> <span class="attr">v-slot</span> = <span class="string">&quot;fallback&quot;</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">h3</span>&gt;</span>加载中...<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line">    	<span class="tag">&lt;/<span class="name">Suspense</span>&gt;</span>    </span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br></pre></td></tr></table></figure></li>
</ol>
</li>
</ol>
<h3 id="其他"><a href="#其他" class="headerlink" title="其他"></a>其他</h3><h4 id="1-全局API的转移"><a href="#1-全局API的转移" class="headerlink" title="1.全局API的转移"></a>1.全局API的转移</h4><ol>
<li><p>Vue2.x有许多全局API和配置</p>
<ol>
<li><p>例如：注册全局组件，注册全局指令等</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//</span></span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">component</span>(<span class="string">&#x27;MyButton&#x27;</span>,&#123;</span><br><span class="line">	<span class="attr">data</span>:<span class="function">()=&gt;</span>(&#123;</span><br><span class="line">		count = <span class="number">0</span></span><br><span class="line">	&#125;)</span><br><span class="line"></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">directive</span>(<span class="string">&#x27;focus&#x27;</span>,&#123;</span><br><span class="line">    <span class="attr">inserted</span>: <span class="function"><span class="params">el</span> =&gt;</span> el.<span class="title function_">focus</span>()</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure></li>
</ol>
</li>
<li><p><code>Vue3中对这些API做出了调整：</code></p>
<ol>
<li><p>将全局的API，即：<code>Vue.xxx</code>调整到应用实例<code>app</code>上</p>
<table>
<thead>
<tr>
<th>2.x全局API(vue)</th>
<th>3.x实例API(app)</th>
</tr>
</thead>
<tbody><tr>
<td>Vue.config.xxx</td>
<td>app.config.xxx</td>
</tr>
<tr>
<td>Vue.config.productionTip</td>
<td>移除</td>
</tr>
<tr>
<td>Vue.component</td>
<td>app.component</td>
</tr>
<tr>
<td>Vue.directive</td>
<td>app.directive</td>
</tr>
<tr>
<td>Vue.mixin</td>
<td>app.mixin</td>
</tr>
<tr>
<td>Vue.use</td>
<td>app.use</td>
</tr>
<tr>
<td>Vue.prototype</td>
<td>app.config.globalProperties</td>
</tr>
</tbody></table>
</li>
</ol>
</li>
</ol>
<h4 id="2-其他改变"><a href="#2-其他改变" class="headerlink" title="2.其他改变"></a>2.其他改变</h4><ol>
<li><p>data选项应始终被声明为应该函数</p>
</li>
<li><p>过度类名的更改</p>
<ol>
<li><p>Vue2.x写法</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">.<span class="property">v</span>-enter,</span><br><span class="line">.<span class="property">v</span>-leave-to&#123;</span><br><span class="line">	<span class="attr">opacity</span>:<span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line">.<span class="property">v</span>-leave,</span><br><span class="line">.<span class="property">v</span>-enter-to&#123;		</span><br><span class="line">	<span class="attr">opacity</span>:<span class="number">1</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>Vue3.x写法</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">.<span class="property">v</span>-enter-<span class="keyword">from</span>,</span><br><span class="line">.<span class="property">v</span>-leave-to&#123;</span><br><span class="line">	<span class="attr">opacity</span>:<span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line">.<span class="property">v</span>-leave-<span class="keyword">from</span>,</span><br><span class="line">.<span class="property">v</span>-enter-to&#123;</span><br><span class="line">	<span class="attr">opacity</span>:<span class="number">0</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ol>
</li>
<li><p>移除keyCode作为v-on的修饰符，同时也不再支持<code>config.keyCodes</code></p>
</li>
<li><p>移除<code>v-on.native</code>修饰符</p>
<ol>
<li><p>父组件中绑定事件</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&lt;my-componebt/</span><br><span class="line">	v-<span class="attr">on</span>:close = <span class="string">&quot;handleComponentEvent&quot;</span></span><br><span class="line">	v-<span class="attr">on</span>:click = <span class="string">&quot;handleNativeClickEvent&quot;</span></span><br><span class="line">/&gt;</span><br></pre></td></tr></table></figure>
</li>
<li><p>子组件中绑定事件</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">	export default &#123;</span><br><span class="line">    	emits:[&#x27;close&#x27;]</span><br><span class="line">    &#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure></li>
</ol>
</li>
<li><p>移除过滤器(filter)</p>
<blockquote>
<p>过滤器虽然这看起来很方便，但它需要应该自定义语法，打破大括号内表达式是“只是JavaScript”的假设，这不仅有学习成本，而且有实现成本！建议用方法调用或计算属性去天替换过滤器</p>
</blockquote>
</li>
<li><p>…….</p>
</li>
</ol>
</li>
</ul>

  </div>
  <div id="copyright"><style>#easter-egg{border:0;padding:10px 0;position:relative}#easter-egg::before{font-family:"Font Awesome 5 Free";font-weight:900;content:"本文结束 \f1b0  感谢阅读";position:absolute;
padding:0 10px;
line-height:1px;
white-space:nowrap;
left:50%;
transform:translateX(-50%)}
</style><hr id="easter-egg"><blockquote style="padding:0">
    <p>作者: <a href="https://mihaoyou.gitee.io">
        <a1>云静</a1>
    </a></p>
    <p>版权声明: 本博客所有文章除特别声明外, 均采用 <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)"><a1>CC BY-NC-ND 4.0</a1></a> 许可协议, 转载请注明出处！</p></blockquote><hr></div>
</article>


    <div class="blog-post-comments">
        <div id="utterances_thread">
            <noscript>加载评论需要在浏览器启用 JavaScript 脚本支持。</noscript>
        </div>
    </div>


        
          <div id="footer-post-container">
  <div id="footer-post">

    <div id="nav-footer" style="display: none">
      <ul>
         
          <li><a href="/">首页</a></li>
         
          <li><a href="/about/">关于</a></li>
         
          <li><a href="/archives/">归档</a></li>
         
          <li><a href="/categories/">分类</a></li>
         
          <li><a href="/search/">搜索</a></li>
        
      </ul>
    </div>

    <div id="toc-footer" style="display: none">
      <ol class="toc"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%88%9D%E8%AF%86Vue"><span class="toc-number">1.</span> <span class="toc-text">初识Vue</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%AE%80%E4%BB%8B"><span class="toc-number">2.</span> <span class="toc-text">简介</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%88%9B%E5%BB%BAVue%E5%AE%9E%E4%BE%8B"><span class="toc-number">3.</span> <span class="toc-text">创建Vue实例</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%A8%A1%E6%9D%BF%E8%AF%AD%E6%B3%95"><span class="toc-number">4.</span> <span class="toc-text">模板语法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#el%E5%92%8Cdata%E7%9A%84%E4%B8%A4%E7%A7%8D%E5%86%99%E6%B3%95"><span class="toc-number">5.</span> <span class="toc-text">el和data的两种写法:</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Object-defineProperty"><span class="toc-number">6.</span> <span class="toc-text">Object.defineProperty()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Vue%E4%B8%AD%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6%EF%BC%9A"><span class="toc-number">7.</span> <span class="toc-text">Vue中事件修饰符：</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%94%AE%E7%9B%98%E4%BA%8B%E4%BB%B6%EF%BC%9A"><span class="toc-number">8.</span> <span class="toc-text">键盘事件：</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7%EF%BC%9A"><span class="toc-number">9.</span> <span class="toc-text">计算属性：</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%9B%91%E8%A7%86%E5%B1%9E%E6%80%A7%EF%BC%9A"><span class="toc-number">10.</span> <span class="toc-text">监视属性：</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%BB%91%E5%AE%9Aclass%E6%A0%B7%E5%BC%8F%EF%BC%9A"><span class="toc-number">11.</span> <span class="toc-text">绑定class样式：</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%BB%91%E5%AE%9Astyle%E6%A0%B7%E5%BC%8F%EF%BC%9A"><span class="toc-number">12.</span> <span class="toc-text">绑定style样式：</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%9D%A1%E4%BB%B6%E6%B8%B2%E6%9F%93%EF%BC%9A"><span class="toc-number">13.</span> <span class="toc-text">条件渲染：</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#v-if"><span class="toc-number">13.1.</span> <span class="toc-text">v-if</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#v-show"><span class="toc-number">13.2.</span> <span class="toc-text">v-show</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#v-for%E6%8C%87%E4%BB%A4%EF%BC%9A"><span class="toc-number">13.3.</span> <span class="toc-text">v-for指令：</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Vue%E7%9B%91%E8%A7%86%E6%95%B0%E6%8D%AE%E7%9A%84%E5%8E%9F%E7%90%86%EF%BC%9A"><span class="toc-number">14.</span> <span class="toc-text">Vue监视数据的原理：</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%A6%82%E4%BD%95%E7%9B%91%E8%A7%86%E6%95%B0%E7%BB%84%E4%B8%AD%E7%9A%84%E6%95%B0%E6%8D%AE%EF%BC%9F"><span class="toc-number">14.1.</span> <span class="toc-text">如何监视数组中的数据？</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%9C%A8Vue%E4%BF%AE%E6%94%B9%E6%95%B0%E7%BB%84%E4%B8%AD%E7%9A%84%E6%9F%90%E4%B8%80%E4%B8%AA%E5%85%83%E7%B4%A0%E4%B8%80%E5%AE%9A%E8%A6%81%E7%94%A8%E5%A6%82%E4%B8%8B%E6%96%B9%E6%B3%95%EF%BC%9A"><span class="toc-number">14.2.</span> <span class="toc-text">在Vue修改数组中的某一个元素一定要用如下方法：</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%94%B6%E9%9B%86%E8%A1%A8%E5%8D%95%E6%95%B0%E6%8D%AE%EF%BC%9A"><span class="toc-number">14.3.</span> <span class="toc-text">收集表单数据：</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%BF%87%E6%BB%A4%E5%99%A8%EF%BC%9A"><span class="toc-number">15.</span> <span class="toc-text">过滤器：</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Vue%E5%85%B6%E4%BB%96%E6%8C%87%E4%BB%A4"><span class="toc-number">16.</span> <span class="toc-text">Vue其他指令</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#v-text%E6%8C%87%E4%BB%A4"><span class="toc-number">16.1.</span> <span class="toc-text">v-text指令</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#v-html%E6%8C%87%E4%BB%A4"><span class="toc-number">16.2.</span> <span class="toc-text">v-html指令</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#v-cloak%E6%8C%87%E4%BB%A4%EF%BC%88%E6%B2%A1%E6%9C%89%E5%80%BC%EF%BC%89"><span class="toc-number">16.3.</span> <span class="toc-text">v-cloak指令（没有值）</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#v-once%E6%8C%87%E4%BB%A4%EF%BC%9A"><span class="toc-number">16.4.</span> <span class="toc-text">v-once指令：</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#v-pre%E6%8C%87%E4%BB%A4%EF%BC%9A"><span class="toc-number">16.5.</span> <span class="toc-text">v-pre指令：</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4%EF%BC%9A-%E5%87%BD%E6%95%B0%E5%BC%8F"><span class="toc-number">17.</span> <span class="toc-text">自定义指令：(函数式)</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%B8%80%E3%80%81%E5%AE%9A%E4%B9%89%E8%AF%AD%E6%B3%95%EF%BC%9A"><span class="toc-number">17.1.</span> <span class="toc-text">一、定义语法：</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BA%8C%E3%80%81%E9%85%8D%E7%BD%AE%E5%AF%B9%E8%B1%A1%E4%B8%AD%E5%B8%B8%E7%94%A8%E7%9A%843%E4%B8%AA%E5%9B%9E%E8%B0%83%EF%BC%9A"><span class="toc-number">17.2.</span> <span class="toc-text">二、配置对象中常用的3个回调：</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%B8%89%E3%80%81%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9"><span class="toc-number">17.3.</span> <span class="toc-text">三、注意事项</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F"><span class="toc-number">18.</span> <span class="toc-text">生命周期</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%B8%B8%E8%A7%81%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90%EF%BC%9A"><span class="toc-number">18.1.</span> <span class="toc-text">常见生命周期钩子：</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%85%B3%E4%BA%8E%E9%94%80%E6%AF%81Vue%E5%AE%9E%E4%BE%8B%EF%BC%9A"><span class="toc-number">18.2.</span> <span class="toc-text">关于销毁Vue实例：</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%A8%A1%E5%9D%97"><span class="toc-number">19.</span> <span class="toc-text">模块</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%BB%84%E4%BB%B6"><span class="toc-number">20.</span> <span class="toc-text">组件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%A8%A1%E5%9D%97%E5%8C%96"><span class="toc-number">21.</span> <span class="toc-text">模块化</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Vue%E4%B8%AD%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8%E7%BB%84%E4%BB%B6"><span class="toc-number">22.</span> <span class="toc-text">Vue中如何使用组件</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%B8%80%E3%80%81%E5%A6%82%E4%BD%95%E5%AE%9A%E4%B9%89%E4%B8%80%E4%B8%AA%E7%BB%84%E4%BB%B6"><span class="toc-number">22.1.</span> <span class="toc-text">一、如何定义一个组件</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BA%8C%E3%80%81%E5%A6%82%E4%BD%95%E6%B3%A8%E5%86%8C%E7%BB%84"><span class="toc-number">22.2.</span> <span class="toc-text">二、如何注册组</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%B8%89%E3%80%81%E7%BC%96%E5%86%99%E7%BB%84%E4%BB%B6%E6%A0%87%E7%AD%BE"><span class="toc-number">22.3.</span> <span class="toc-text">三、编写组件标签</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%B3%A8%E6%84%8F%E7%82%B9%EF%BC%9A"><span class="toc-number">22.4.</span> <span class="toc-text">注意点：</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%85%B3%E4%BA%8EVueComponent%EF%BC%9A"><span class="toc-number">23.</span> <span class="toc-text">关于VueComponent：</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%84%9A%E6%89%8B%E6%9E%B6%E6%96%87%E4%BB%B6%E7%BB%93%E6%9E%84%EF%BC%9A"><span class="toc-number">24.</span> <span class="toc-text">脚手架文件结构：</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#ref%E5%B1%9E%E6%80%A7%EF%BC%9A"><span class="toc-number">25.</span> <span class="toc-text">ref属性：</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%85%8D%E7%BD%AE%E9%A1%B9props%EF%BC%9A"><span class="toc-number">26.</span> <span class="toc-text">配置项props：</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#mixin%EF%BC%88%E6%B7%B7%E5%85%A5%EF%BC%89"><span class="toc-number">27.</span> <span class="toc-text">mixin（混入）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%8F%92%E4%BB%B6%EF%BC%9A"><span class="toc-number">28.</span> <span class="toc-text">插件：</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#scoped%E6%A0%B7%E5%BC%8F"><span class="toc-number">29.</span> <span class="toc-text">scoped样式</span></a></li></ol>
    </div>

    <div id="share-footer" style="display: none">
      <ul>
  <li><a class="icon" target="_blank" rel="noopener" href="http://www.facebook.com/sharer.php?u=https://mihaoyou.gitee.io/Vue/"><i class="fab fa-facebook fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="https://twitter.com/share?url=https://mihaoyou.gitee.io/Vue/&text=Vue"><i class="fab fa-twitter fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://www.linkedin.com/shareArticle?url=https://mihaoyou.gitee.io/Vue/&title=Vue"><i class="fab fa-linkedin fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="https://pinterest.com/pin/create/bookmarklet/?url=https://mihaoyou.gitee.io/Vue/&is_video=false&description=Vue"><i class="fab fa-pinterest fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="mailto:?subject=Vue&body=Check out this article: https://mihaoyou.gitee.io/Vue/"><i class="fas fa-envelope fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="https://getpocket.com/save?url=https://mihaoyou.gitee.io/Vue/&title=Vue"><i class="fab fa-get-pocket fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://reddit.com/submit?url=https://mihaoyou.gitee.io/Vue/&title=Vue"><i class="fab fa-reddit fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://www.stumbleupon.com/submit?url=https://mihaoyou.gitee.io/Vue/&title=Vue"><i class="fab fa-stumbleupon fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://digg.com/submit?url=https://mihaoyou.gitee.io/Vue/&title=Vue"><i class="fab fa-digg fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://www.tumblr.com/share/link?url=https://mihaoyou.gitee.io/Vue/&name=Vue&description="><i class="fab fa-tumblr fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="https://news.ycombinator.com/submitlink?u=https://mihaoyou.gitee.io/Vue/&t=Vue"><i class="fab fa-hacker-news fa-lg" aria-hidden="true"></i></a></li>
</ul>

    </div>

    <div id="actions-footer">
        <a id="menu" class="icon" href="#" onclick="$('#nav-footer').toggle();return false;"><i class="fas fa-bars fa-lg" aria-hidden="true"></i> 菜单</a>
        <a id="toc" class="icon" href="#" onclick="$('#toc-footer').toggle();return false;"><i class="fas fa-list fa-lg" aria-hidden="true"></i> 目录</a>
        <a id="share" class="icon" href="#" onclick="$('#share-footer').toggle();return false;"><i class="fas fa-share-alt fa-lg" aria-hidden="true"></i> 分享</a>
        <a id="top" style="display:none" class="icon" href="#" onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');"><i class="fas fa-chevron-up fa-lg" aria-hidden="true"></i> 返回顶部</a>
    </div>

  </div>
</div>

        
        <footer id="footer">
      <div class="footer-left">
        Copyright &copy;
        
        
        2022-2023
        云雪
      </div>
      <div class="footer-right">
        <nav>
          <ul>
            <!--
          --><li><a href="/">首页</a></li><!--
        --><!--
          --><li><a href="/about/">关于</a></li><!--
        --><!--
          --><li><a href="/archives/">归档</a></li><!--
        --><!--
          --><li><a href="/categories/">分类</a></li><!--
        --><!--
          --><li><a href="/search/">搜索</a></li><!--
        -->
          </ul>
          <ul>
          
              <!-- 不蒜子统计 -->
              <span id="busuanzi_container_site_pv">
                  本站总访问量<span id="busuanzi_value_site_pv"></span>次
              </span>
              <span class="post-meta-divider">|</span>
              <span id="busuanzi_container_site_uv" style='display:none'>
                      本站访客数<span id="busuanzi_value_site_uv"></span>人
              </span>
            <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
            
          </ul>
        </nav>
      </div>
      
</footer>


    </div>
    <!-- styles -->



  <link rel="preload" as="style" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" crossorigin="anonymous" onload="this.onload=null;this.rel='stylesheet'"/>


    <!-- jquery -->
 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script> 




<!-- clipboard -->

  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.7/clipboard.min.js" crossorigin="anonymous"></script> 
  
  <script type="text/javascript">
  $(function() {
    // copy-btn HTML
    var btn = "<span class=\"btn-copy tooltipped tooltipped-sw\" aria-label=\"复制到粘贴板！\">";
    btn += '<i class="far fa-clone"></i>';
    btn += '</span>'; 
    // mount it!
    $(".highlight table").before(btn);
    var clip = new ClipboardJS('.btn-copy', {
      text: function(trigger) {
        return Array.from(trigger.nextElementSibling.querySelectorAll('.code')).reduce((str,it)=>str+it.innerText+'\n','')
      }
    });
    clip.on('success', function(e) {
      e.trigger.setAttribute('aria-label', "复制成功！");
      e.clearSelection();
    })
  })
  </script>


<script src="/js/main.js"></script>

<!-- search -->

<!-- Google Analytics -->

<!-- Baidu Analytics -->

  <script type="text/javascript">
        var _hmt = _hmt || [];
        (function() {
          var hm = document.createElement("script");
          hm.src = "https://hm.baidu.com/hm.js?d052d72734717a430b46e4d07257350b";
          var s = document.getElementsByTagName("script")[0];
          s.parentNode.insertBefore(hm, s);
        })();
        </script>

<!-- Cloudflare Analytics -->

<!-- Umami Analytics -->

<!-- Disqus Comments -->

<!-- utterances Comments -->

    <script type="text/javascript">
      var utterances_repo = 'mihaoyou/huayu';
      var utterances_issue_term = 'pathname';
      var utterances_label = 'Comment';
      var utterances_theme = 'github-dark';

      (function(){
          var script = document.createElement('script');

          script.src = 'https://utteranc.es/client.js';
          script.setAttribute('repo', utterances_repo);
          script.setAttribute('issue-term', 'pathname');
          script.setAttribute('label', utterances_label);
          script.setAttribute('theme', utterances_theme);
          script.setAttribute('crossorigin', 'anonymous');
          script.async = true;
          (document.getElementById('utterances_thread')).appendChild(script);
      }());
  </script>

</body>
</html>
